在submitHandler(）中单击Jquery Validation，Get按钮

Jquery Validation, Get button clicked in submitHandler()

本文关键字：Validation Get 按钮 Jquery 单击 submitHandler      更新时间：2023-09-26

我在来自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>

在这里，您可以使用验证插件的未记录功能。

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

您的表单上有两个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();
    }
});

演示：http://jsfiddle.net/etHcZ/

我遇到了同样的问题，不想依靠另一个事件来确保我有正确的值。在调用submitHandler之前，validate.js会将按下按钮的值作为隐藏字段添加到表单上：

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

我希望这能帮助到别人

我将通过事件对象来识别按钮。由于"Christopher Wigginton"给出的答案是一个愚蠢的答案，除了它在第一次点击时给了我"未定义"。

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

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

这里有一个例子：

示例

以下内容似乎对我有效。

您可以在表单中的提交上方的行中添加一个隐藏字段，该字段将随附发送：

$('.dp-blog-form').append('<input type="hidden" name="theButton" value="'+ this.value +'"/>');
相关文章：