[英]Jquery Validation, Get button clicked in submitHandler()
我在 from 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());
}
});
<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 & 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/
我遇到了同样的问题,不想依赖另一个事件触发来确保我拥有正确的价值。 碰巧的是,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();
}
我希望能帮助某人。 :-)
我将通过事件对象识别按钮。 由于“克里斯托弗威金顿”给出的答案是一个很好的答案,除了第一次点击时它给我“未定义”。
$(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 +'"/>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.