单击单选按钮提交表单-单击单选提交表单并执行其他操作 [英] Submit form on radio button click - Submit form and perform other actions on radio click

问题描述

我有一个有关单选按钮和表单的jQuery问题.

I have a jQuery question concerning Radio buttons and forms.

我设置了选项卡式内容设置，其中有5个选项卡设置，每个选项卡中都有一个表单.

I have tabbed content setup with 5 tabs setup with a form in each tab.

每个表单都包含5个单选按钮和一个提交按钮.

Each form consists of 5 radio buttons and a submit button.

我有一个jQuery设置来验证是否已进行选择，然后使用AJAX提交表单，关闭当前选项卡(slideUp)，然后打开下一个选项卡(slideDown).

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.

我需要做些什么，以便单击任何一个单选按钮将提交格式并关闭选项卡.我的jQuery代码发布在下面.

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

推荐答案

从一张幻灯片到下一张幻灯片的过渡由您的submitHandler处理，因此所有单选按钮需要做的就是在点击时提交表格，记住:

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.

这篇关于单击单选按钮提交表单-单击单选提交表单并执行其他操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！