Question

我正在使用JQuery对话插件，除了用户能够点击任何按钮确认之前提交的表单之外，该插件工作正常。我添加了preventDefault但是根据我放置它的位置，它要么完全停止表单提交要么完全被忽略而且表单只是在没有确认的情况下提交

<script type="text/javascript">
  $(document).ready(function() {  
    $('#perm_del_submit').click(function(ev){
      $.msgbox("Are you sure?", {  
        type: "confirm", 
        buttons: [
          {type: "submit", value: "Yes"},
          {type: "cancel", value: "No"}
        ]
      }, function(result) {
        if (result == 'Yes') {
          $('#audit_sort_form').submit();
        }
      });
    ev.preventDefault();   
    });
  });
</script>

Answer 1

创建确认窗口后将触发回调函数。这就是为什么它甚至在回答确认之前调用提交。根据代码，当它显示确认时，它认为它正在处理完成，并且在que中的下一个是回调函数。如果我没有弄错的话，您必须将提交功能应用于“点击”事件。

Answer 2

不要将处理程序绑定到“click”事件，而是绑定到表单提交事件（如果我在表单中并且我选择了提交按钮并按Enter键，我已提交表单但完全绕过了您的处理程序功能。这也不常见。）

如果您想按照建议的方式进行操作，您还必须在消息框显示后给您的表单一个标志（我在下面的示例中使用了“submittable”）。

$('#audit_sort_form').on('submit',function(e) {
   var el = $(this),submittable = el.data('submittable');

   if(!submittable) {
    e.preventDefault();


      $.msgbox("Are you sure?", {  
        type: "confirm", 
        buttons: [
          {type: "submit", value: "Yes"},
          {type: "cancel", value: "No"}
        ]
      }, function(result) {
        if (result == 'Yes') {
         el.data('submittable',true);
         el.submit();
        }
      });
   }


});

Answer 3

我猜您的实际提交按钮（#perm_del_submit）是<input type="submit"/>？将其设为<input type="button"/>？

Answer 4

对于验证表单或确认表单提交，我建议处理表单的submit事件而不是按钮的click事件。提交表单的方法不止一种，因此，除非您只关心通过单击特定按钮提交表单的时间，否则请处理表单提交事件。

另一个好习惯是首先打电话给e.preventDefault()。这样，如果函数中存在JavaScript错误或return语句，表单提交仍然会被取消。

$("#audit_sort_form").submit(function(e) {
    e.preventDefault();
    var form = this;
    $.msgbox("Are you sure?", {  
        type: "confirm", 
        buttons: [
            {type: "submit", value: "Yes"},
            {type: "cancel", value: "No"}
        ]
    }, function(result) {
        if (result == "Yes") {
            form.submit();
        }
    });
});

通过调用submit()元素的<form>方法提交表单时，提交事件不被调用。此外，该按钮不包含在表单中。因此，如果您的服务器端处理程序依赖于包含的提交按钮的值，您将不得不使用隐藏的输入来欺骗它。如果您有相同表单的多个按钮，并且服务器点击了哪个按钮很重要，请在表单中添加一个隐藏字段：

<input type="hidden" name="perm_del_submit" />
<input type="submit" value="a" />
<input type="submit" value="b" />

单击按钮时设置字段的值：

$("input[type=submit]").click(function(){
    this.form.perm_del_submit.value = this.value;
});

然后，让上面的submit处理程序处理表单提交。隐藏的输入值将已设置，并将指示触发表单提交的按钮。

jquery在给出确认之前提交表格

4 个答案: