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

Answer 1

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.