I want the form to be submitted when the user chooses one of the radio button options. I know how to do this with select fields:
<select name='something' onchange="this.form.submit()">
But how to do this with radio buttons?
You can use onclick:
<input type="radio" name="something" onclick="this.form.submit()">
You can test for compatibility (of keyboard entry like left/right or tabbing then pressing space/enter and even keyboard only navigation plugins) using this example.
Try hooking into the onclick event.
<input type="radio" name="something" value="somethingvalue" onclick="this.form.submit();" />
Related
Is it possible to have a radio button's "onchange" event fire when the radio button is checked via an external function, and not by clicking on the radio button itself?
I have created a demo of my issue below, feel free to put the following in a text file and save it as .HTML:
<!DOCTYPE html>
<html>
<body>
<p>
This example demonstrates how the "onchange" event on radio buttons does not fire if the button is selected externally, i.e. by setting its "checked" value to "true".
<br />
You can test this by clicking one of the radio buttons invididually, then by clicking the "Select 1" or "Select 2" buttons.
<br />
The radio buttons have an "onchange" event registered such that an alert box should pop up when one of them is selected.
</p>
1: <input type="radio" value="1" id="1" name="myradio" onchange="myFunction()" /> <input type="button" value="Select 1" onclick="document.getElementById('1').checked=true;" /><br />
2: <input type="radio" value="2" id="2" name="myradio" onchange="myFunction()" /> <input type="button" value="Select 2" onclick="document.getElementById('2').checked=true;" />
<script>
function myFunction() {
alert("A radio button was selected.");
}
</script>
</body>
</html>
This is not a duplicate of How to trigger event in JavaScript?, and this is how:
If I were to fire the event manually, that would require me to look at the radio button and compared to the last time I looked at it, and fire the "onchange" event accordingly. The issue is that the radio button can be selected through a multitude of ways (click, keyboard press, touch/tap, external function etc) and rather than monitor each avenue of selection, I'd rather have the input element do that for me. If I can achieve what I am asking in the question, it will simplify this.
Use .click()
<input type="button" value="Select 2" onclick="document.getElementById('2').click();" />
You should avoid using inline js.
Basically I have two radio buttons which sit in a form. When the first radio button is checked, a form appears which enables a new user to register on the site. The second one is for already registered users who want to sign in.
I've included some jVal form validation. Now, if I check the second radio button, and type an invalid password in the password field (something that doesn't pass the jVal validation), an error message appears. The behavior so far is okay. However, if I now check the first radio button (the one for new users), the error message stays there. I've tried to override this by adding a click event to the first radio button, which should hide the error message from the previous screen once clicked.
radioButton.on('click', function(){
errorDiv.popover('hide');
console.log('click event registered');
});
The problem is that I need to click the radio button twice in order to get the click event to register...
Anyone got a clue on the issue and why do I have to click the radio button twice so that the event can be registered?
This demo shows a solution in action: DEMO
It is a very simple Jquery:
<body>
<form>
<input type="radio" value="1" name="test" />Value1
<br />
<input type="radio" value="2" name="test" />Value2
<br />
<input type="radio" value="3" name="test" />Value3
</form>
<script>
$(document).ready(function(){
$("input[name='test']").click(function(){
alert($(this).val());
})
})
</script>
</body>
I have this form here and want each radio buttons not to be able to be checked. I dont want disabled because if one happens to be selected I still want that value to be submitted to the database. This is just a basic example.
When I click on one of them it checks, then does not allow me to click the other one.
I want both buttons not to be able to be checked.
<form action="here.php" method="post">
<input onclick="return false" type="radio" name="firstone" value="Yes" /> Yes
<input onclick="return false" type="radio" name="firstone" value="No" /> No
<input type="submit" />
</form>
Does anyone know how to fix this? I dont want to use javascript.
Rather than trying to prevent clicking on radio buttons. You should use a hidden element to contain the values to send with your form.
The only reason I can imagine you want to have them disabled, but not 'disabled' is because they look ugly when they're disabled.
How about you just change the CSS on the page?
:disabled CSS selector
I am wondering whether you can make a button, function like a HTML Radio button. I am trying to create a form where the user clicks on the said button and a value is thus selected, but the user is not directed until selecting another option and submitting the form. Does anyone know how to go about doing this?
(I don't mind the use of other languages including javascript etc.)
jQueryUI has a Button Widget that converts radio buttons or checkboxes into buttons.
Example from the site:
http://jqueryui.com/demos/button/#radio
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
<div class="demo">
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
</div>
You can visit the link to see it in action.
First, on the page you're talking about, it sounds as if the user is taken somewhere else -- i.e., a submit-like action is taken -- merely by his selecting a radio button. I don't believe that this is the very best practice.
Second, you should imo keep the two radio buttons: they work great and, once selected, a radio button can't be cleared except by selecting another button. This is just what you want.
To be sure that the two buttons you require have been selected, give each button an onclick handler that sets a switch: some button in this group was selected.
Then, when he clicks submit, check those two switches and tell him if he forgot to click a button.
Yes, you need JavaScript to do all this.
I'm using jQuery to submit a form in an MVC app. I have a breakpoint inside the controller and I see it is being hit twice. What am I doing wrong?
Here is my jQuery
(function ($) {
$(document).ready(function () {
$(':radio').change(function () {
$('#frmMDR').submit();
});
});
})(jQuery);
and here is the form html
<form action="/Module/ModuleIndex" id="frmMDR" method="get">
<input id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
<input id="hdnVehicle" name="hdnVehicle" type="hidden" value="" />
</form>
I'm guessing I shouldn't be using the change event. If anyone knows how to correct the problem, I'd love to hear any ideas. Thanks so much for any tips.
Cheers,
~ck in San Diego
You are getting two hits because two radio buttons are changing state. Radio buttons only allow one element in a group to be selected so when you are clicking a radio button, two events are happening:
A new radio button is selected
The previously selected radio button is deselected
This is two events and the reason why your code is being hit twice. To solve it you could give your radio buttons a class and then handle the event on click using the class as the selector.
<input class="radio" id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input class="radio" id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input class="radio" id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
And your jQuery could be:
$('.radio').click(function () {
$('#frmMDR').submit();
});
You should probably just check for selected within the change function for which is selected. This way it'll only fire for the selected radio button, and you don't need to worry about binding or unbinding any events, and it should work regardless of what input method changed it.
Here's an article on handling events from check boxes and radio buttons in JQuery.