Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

jquery

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
});
like image 235
Michael Fever Avatar asked Oct 29 '12 17:10

Michael Fever


3 Answers

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.

like image 170
Rory McCrossan Avatar answered Nov 15 '22 18:11

Rory McCrossan


This worked for me:

<input name="myRadio" type="radio" value="1" onchange="this.form.submit()"/>
like image 44
Graeme Mehl Avatar answered Nov 15 '22 20:11

Graeme Mehl


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();
});
like image 25
NullPoiиteя Avatar answered Nov 15 '22 18:11

NullPoiиteя