Submit form on radio button click - Submit form and perform other actions on radio click

Question

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
});

Rory McCrossan · Accepted Answer · 2015-06-15T10:21:40.793

37

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.

edited Jun 15 '15 at 10:21

answered Oct 29 '12 at 17:19

Rory McCrossan

331,213
40
305
339

My tabs allow them to go back already by clicking them. I only posted a small portion of my code.. there is quite a bit of other code there as well. Let me try this.. – Michael Fever Oct 29 '12 at 17:59
This worked great, it works well with my existing code by the looks of it. The beauty of it was the "closest" ... As there are 5 forms on the page. – Michael Fever Oct 29 '12 at 18:05
You would be better to use change event instead of click so that it works with wrapped labels – John Magnolia Jun 15 '15 at 10:20
@JohnMagnolia You're indeed correct. Updated this very old answer for you. – Rory McCrossan Jun 15 '15 at 10:21

score 12 · Answer 2 · answered Jan 25 '17 at 13:35

12

This worked for me:

<input name="myRadio" type="radio" value="1" onchange="this.form.submit()"/>

answered Jan 25 '17 at 13:35

Graeme Mehl

167
2
8

NullPoiиteя · Answer 3 · 2012-10-29T17:24:24.163

9

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();
});

edited Oct 29 '12 at 17:24

answered Oct 29 '12 at 17:19

NullPoiиteя

56,591
22
125
143

unrelated but this showed up in google at only 39 minutes past posting! thats amazing google. – Michael Fever Oct 29 '12 at 17:57
@MichaelDeMutis even than i have saw some time less than half a minute but never got solution how to do this – NullPoiиteя Oct 29 '12 at 17:59

score 0 · Answer 4 · answered May 04 '20 at 19:17

0

Try This!!

 $('input[type=radio]').on('change', function() {
$('input[type=submit]').click();});

answered May 04 '20 at 19:17

Toki

268
3
10

Submit form on radio button click - Submit form and perform other actions on radio click

4 Answers4

Linked