I have a jQuery question concerning Radio buttons and forms.
I have tabbed content setup with 5 tabs setup with a form in each tab.
Each form consists of 5 radio buttons and a submit button.
I have my jQuery setup to validatte that a selection has been made first, then submit the form using AJAX, close the current tab (slideUp) and open the next tab (slideDown).
What I would prefer to do is remove the submit buttons and submit the form on the click of any of the radiobuttons. So that clicking a radio button submits the form, closes the current tab and opens the next.
What do I need to do to make it so that clicking any one of the radio buttons will submit the forma and close the tabs. My jQuery code is posted below.
$("#selfAss1").validate({
invalidHandler: function(e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted below'
: 'You missed ' + errors + ' fields. They have been highlighted below';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
onkeyup: false,
submitHandler: function() {
$.post('/_action.php', $("#selfAss1").serialize(), function(data) {
$('.pane1').slideUp('slow');
$('#result1').html(data);
$('.pane2').slideDown('slow');
});
},
debug:true
});
The transition from one slide to the next is handled by your submitHandler
, so all the radio buttons need to do is submit the form on click, with that in mind:
$('input[type=radio]').on('change', function() {
$(this).closest("form").submit();
});
A couple of notes; firstly I used the attribute selector here, you may want to change that to a class or something more specific for your needs. Secondly, you may also want to include a 'return' method to allow people to change their selections. With this method, if you click once, that's it.
This worked for me:
<input name="myRadio" type="radio" value="1" onchange="this.form.submit()"/>
try
<input type="radio" name="something" onclick="document.getElementById('myForm').submit();"/>
or
<input type="radio" name="something" onclick="this.form.submit()">
in jquery try something like
$('input[type=radio]').click(function() {
$("form id or class").submit();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With