Jquery验证,在submitHandler()中单击了Get按钮

时间:2014-05-30 06:16:15

标签: javascript jquery jquery-validate

我在type='Submit''上有两个按钮 验证后,在submitHandler中我想要点击这些按钮中的哪一个。

依赖于此,我想禁用该按钮。

处理程序

$("#add_customer").validate({
    rules: {
        name: {
            required: true
        },
        annual_sales_weight: {
            required: true,
            number: true
        }

    },
    errorClass: "help-inline",
    errorElement: "span",
    highlight: highlightJquery,
    unhighlight: Unhilight,
    submitHandler: function (form) {
        var btn = $(form).find('button');
        disable(btn)
        sendAjaxRequest(url,data=form.serialize());

    }
});

HTML

<button class="btn btn-primary" name="add" type="submit"> Submit</button>
<button class="btn btn-primary" name="prospect" type="submit"> Submit & Add prospect</button>

6 个答案:

答案 0 :(得分:5)

您的表单上有两个submit按钮,所以当您到达submitHandler时为时已晚。如果您想知道单击了哪个按钮,则必须提前捕获该事件。

将它们更改为type="button",以便您可以控制提交。

<button class="btn btn-primary" name="add" type="button">Submit</button>
<button class="btn btn-primary" name="prospect" type="button">Submit &amp; Add prospect</button>

然后添加这个......

$('button[name="add"], button[name="prospect"]').on('click', function (e) {
    e.preventDefault();
    if ($('#myform').valid()) {
        $(this).prop('disabled', 'disabled');
        $('#myform').submit();
    }
});

DEMO:http://jsfiddle.net/etHcZ/

答案 1 :(得分:4)

here中,您可以使用validate插件的未记录功能。

submitHandler: function(form){              
    var submitButtonName =  $(this.submitButton).attr("name");

... rest of code 

答案 2 :(得分:2)

我遇到了同样的问题,并且不想依赖另一个事件来确保我拥有正确的价值。碰巧validate.js会在调用submitHandler之前添加在表单上按下的按钮的值:

return n.settings.submitHandler ? 
  (n.submitButton && (i = e("<input type='hidden'/>").attr("name",
   n.submitButton.name).val(e(n.submitButton).val()).appendTo(n.currentForm))

然后以表单作为第一个参数调用submitHandler。

值得一提的是,如果您随后修改了表单,则会删除此新附加的隐藏字段!在这种情况下,您可以先检索它,然后再将其追加......

submitHandler: function(myForm) {
  var button = $(myForm).find('input[type=hidden][name=mySubmitButtonName]');
  // .. do something with myForm
  $(myForm).append(button) && myForm.submit();
}

我希望能有所帮助。 : - )

答案 3 :(得分:0)

//make sure this code executes after dom loads
$(function () {

   //all submits inside 'form' 
   var _buttons = $('input[type="submit"]', form);

   //all buttons inside 'form' 
   var _buttons = $('button', form);

   //attach a click handler

   _buttons.on("click", function () {
       //the current button that called this handler
       var _currentButton = $(this);

       //do stuff...

       //disable button
       _currentButton.attr("disabled", true);

       //submit form
       form.submit();
   });
});

这是一个例子:

Example

答案 4 :(得分:0)

以下似乎对我有用。

您可以在表单中的提交上方的行中添加一个隐藏字段,该字段将一起发送:

<DataGrid>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Value?" >
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <CheckBox IsChecked="True" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked">
                <Style TargetType="{x:Type CheckBox}">
                    <Style.Triggers>
                        <Trigger Property="Content" Value="1">
                            <Setter Property="IsChecked" Value="True"/>
                        </Trigger>
                        <Trigger Property="Content" Value="2">
                            <Setter Property="IsChecked" Value="False"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </CheckBox>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>

答案 5 :(得分:0)

我将通过事件对象来识别按钮。由于“克里斯托弗·威金顿”给出的答案是个怪胎,除了它在我第一次点击时给我“不确定”。

$(event.target).attr('name');

完整示例:

jQuery(document).on("click", "#btnSaveDraft, #btnSendNotes", function (event) {


    $('#frmThanksNote').validate({// initialize the plugin
        ignore: [],
        debug: false,
        rules: {
           ....
        },
        messages: {
           ....
        },
        errorPlacement: function (error, element) {
          ....
        },
        submitHandler: function (form) {

            var submitButtonName =  $(event.target).attr("id");

            if(submitButtonName == 'btnSaveDraft'){
                saveNotes();
            }else if(submitButtonName == 'btnSendNotes'){
                saveNotes(true);
            }

        },

    });
});