下面是我用来尝试阻止/允许在用户单击提交按钮后提交表单的jQuery。我们的想法是提供一个fancybox模式对话框窗口,其中包含用户输入的数据以供查看。如果他们像,他们点击Looks Good!
并将表单提交回ASP MVC3控制器。如果没有,由于已经调用e.preventDefault
方法,模态窗口关闭,他们可以重新输入数据。
问题是,显然正如我现在所写的那样,如果用户对他们输入的数据感到满意,整个事情将进入一个无限循环,因为我是Look's Good!
按钮调用首先显示它的方法。
有没有办法在submit()
函数中创建一个“独立”方法,所以我可以访问事件对象,如果没有,那么什么是更好的方式(即实际工作)允许单击Look's Good!
按钮后要提交的表单?
//Form submit functions
$('form').submit(function (e) {
e.preventDefault();
if ($('#AccountNumber').val() != $('#doubleaccount').val()) {
alert("Please re-enter the correct account number!");
} else {
var display = "<h1>Test</h1>" +
"<input type='button' value='Looks Good!' onclick='submit()'/>" +
"<input type='button' value='Try Again...' onclick='cancel()'/>";
$.fancybox(display, {
// fancybox API options
fitToView: false,
autoScale: true,
autoDimension: true,
closeClick: true,
openEffect: 'fade',
closeEffect: 'fade',
closeBtn: true,
openSpeed: 'fast',
closeSpeed: 'fast'
});
}
});
});//End doc.ready()
function submit() {
$('form').submit();
}
function cancel() {
$.fancybox.close();
}
答案 0 :(得分:1)
由于您要阻止默认,因此您可能需要通过 ajax submit
表单以避免循环。我认为这可以解决问题:
function submitForm(){
jQuery.ajax({
cache: false,
type: "POST",
url: "process.asp", // your controller
data: jQuery("#myForm").serialize(), // serialize form with id="myForm"
success: function(data){
jQuery.fancybox("form successfully submitted"); // confirmation message
jQuery('#myForm')[0].reset(); // clear form fields
}
});
}
jQuery(function($) {
$("#myForm").on("submit", function(e){
e.preventDefault();
if ($('#AccountNumber').val() != $('#doubleaccount').val()) {
// validation : something went wrong
alert("Please re-enter the correct account number!");
} else {
var display = "<h1>Test</h1>" +
"<input id='submit' type='button' value='Looks Good!'/>" +
"<input id='cancel' type='button' value='Try Again...'/>";
$.fancybox(display,{
// other API options
afterShow: function(){
$("#submit, #cancel").on("click", function(event){
if( $(event.target).is("#submit") ){
submitForm();
}
$.fancybox.close();
});
}
}); // fancybox
}
}); // on submit
}); // ready
注意我已将ID
添加到form
以及buttons
提交或取消所以我可以将事件绑定到所有这些选择器。另请注意,我使用afterShow
回调来绑定fancybox内按钮中的click
事件。
有用阅读:Ajax serialize docs
注意:.on()
需要jQuery v1.7 +
编辑:您实际上可以在验证条件
中替换此行alert("Please re-enter the correct account number!");
这一个:
$.fancybox("Please re-enter the correct account number!");
所以一切看起来都更加一致;)