I have a radiobutton and the value gets submitted with a submitbutton. I only want a submitbutton that submits the value when clicked. So instead of a radiobutton and a submitbutton separate I want a radiobutton and submit button rolled into 1.
This is my code:
{foreach item=item key=key from=$memberships}
<input type="radio" type="hidden" name="membership" value="{$key}" checked="checked"/>
{$item}
{/foreach}
<input class="button" type="submit" value="{lang mkey='continue'} -->"/>
What I am trying to achieve is something like this:
replace the radiobutton and submit button with just a submit button.
<button type="submit" name="membership" value="{$key}">{$item}</button>
Would it be possible and how to do it?
You can have
<input type="radio" type="hidden" name="membership" value="{$key}" checked="checked" onclick="this.form.submit();"/>
or
<input type="hidden" type="hidden" name="membership" id="membership" value="{$key}">
<button type="submit" name="membership" onclick="document.formname.membership.value={$key}; return true;">{lang mkey='continue'}</button>
You could create a small image that looks like a radio button and map that as your submit button. This would give the illusion of having a radio button but when a user clicks it your form would submit.
If you really want to jazz it up, have a second image like a selected radio button and show that with something like an onClick() event.
Just don't have a submit button, and then use an onclick event for the radio button that submits the form.
Related
In the form below, when I click the first radio button then I click the second radio button, both remain checked. The behaviour I want is for when I click on radio button, the other radio button gets unchecked automatically. I am using React.js with styled components.
<form>
<input type="radio"/>
<input type="radio"/>
</form>
Give the same name to all the radio buttons (but different values).
<form>
<input type="radio" name="radio" value="1"/> 1st
<input type="radio" name="radio" value="2"/> 2nd
</form>
You have give each radio button a name property with the same value like "group1". Like so:
<form>
<input type="radio" name="group1"/>
<input type="radio" name="group1"/>
</form>
If there are multiple submit buttons on a form,which submit button is triggered when user hits enter key in a input type="text"
HTML Standard (inplicit submission):
A form element's default button is the first submit button in tree
order whose form owner is that form element.
https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
Give it a try:
<form>
<input type='text'>
<input onclick="alert('FIRST')" type="submit" value="FIRST" />
<input onclick="alert('SECOND')" type="submit" value="SECOND" />
</form>
It should be first type="submit" input.
Fiddle: http://jsfiddle.net/ddan/5tmwjdad/
I have a form with many radio button in html and I want to submit the form using only radio button and not by submit button. Is it possible?
This answer uses jQuery
$('.radiobtnclass').on('click', function() {
$('#formid').submit();
});
radiobtnclass is the class of the radio buttons you want to monitor
formid is the id of the form you wish to submit
You can add an onClick event to each radio tag like so:
<input type='radio' name='x' value='y' onClick='this.form.submit()'/>
<form name="yourForm" action="action.php" method="POST">
<input type="radio" name="radio" value="Radio button" onclick="document.forms['yourForm'].submit()" />
</form>
I have a form on a website that has a dropdown box and instead of a normal submit button I need to have a button marked yes and one marked no.
So I want to store the value of the dropdown box and keep a note of whether the user pressed yes or no.
Normally I would have a drop down then a radio button for yes/no and then submit but I want to combine the action of clicking yes or no into both storing/passing the value and submitting the form.
How could I do that? I don't mind some Javascript if necessary.
Only clicked submit buttons will be successful:
<input type="submit" name="foo" value="Yes">
<input type="submit" name="foo" value="No">
Following is a sample code of which I’m working of. When navigating through ENTER button form submit invokes “Cancel” action though it’s tab index is after the “Next” button.
E.g.
Field01 <ENTER> Field02 <ENTER> Field03 <ENTER> >>>>> Form submits with Cancel action
Field01 <TAB> Field02 <TAB> Field03 <TAB> >>>>> Next button is focused
Changing the order of “submit” buttons in HTML mark-up would help to prevent the invocation of “Cancel” button by default. But I need to keep “Cancel” button in left side & “Next” button in right side.
<form method="post" action="/SVRWeb/ActionController" name="frmMain">
<div>
<h1>Some information</h1>
<label>Field 01</label>
<input type="text" tabindex="0" name="field01" value"" size="15" />
<label>Field 02</label>
<input type="text" tabindex="1" name="field02" value"" size="15" />
<label>Field 03</label>
<input type="text" tabindex="2" name="field03" value"" size="15" />
</div>
<input type="submit" tabindex="4" name="Action.User.Init" value="Cancel" />
<input type="submit" tabindex="3" name="Action.User.Form2" value="Next"/>
</form>
The enter key fires the firstnext type="submit" element in the form, regardless of the tabindex. There are two ways to go around this:
Use JS to click the particular button when enter key is pressed:
<form onkeypress="if (event.keyCode == 13) document.getElementById('next').click();">
This however get nasty when you've a <textarea> in the form for which you of course want to keep its default behaviour with enter key.
Put buttons in same container element with the Next button first and use CSS to swap them.
.next { float: right; }
.cancel { float: left; }
I think it is because it see's the Cancel and Next button as the same thing. They are both of type Submit. So when you press enter it finds the first submit button. I would change the cancel type to maybe reset? Then use javascript/jQuery to do a redirect when you click the cancel button.
There may be a better way.