0

下面是我用来尝试阻止/允许在用户单击提交按钮后提交表单的 jQuery。这个想法将是呈现一个花哨的模式对话框窗口，其中包含用户输入的数据以供查看。如果他们喜欢，他们单击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();
}
4

1 回答 1

1

由于您正在阻止默认设置，因此您可能需要submit通过ajax表单来避免循环。我认为这可以解决问题：

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

请注意，我将IDs 添加到 theform以及buttonsto submit或cancel中，以便我可以将事件绑定到所有这些选择器。另请注意，我使用afterShow回调将click事件绑定在 fancybox 内的按钮中。

有用的阅读：Ajax 序列化文档

注意：.on()需要 jQuery v1.7+

编辑：您实际上可以在验证条件中替换此行

alert("Please re-enter the correct account number!");

通过这个：

$.fancybox("Please re-enter the correct account number!");

所以一切看起来都会更加一致；）

于 2013-08-19T20:24:12.387 回答