jQuery在确认之前提交表格

jquery submits form before confirmation is given

本文关键字：提交 表格 前提 确认 jQuery      更新时间：2023-09-26

我正在使用一个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>

创建确认窗口后，回调函数将触发。这就是为什么它在他们回答确认之前就调用提交的原因。根据代码，当它显示确认时，它认为它的处理已经完成，接下来是 que 中的回调函数。如果我没记错的话，您必须将提交功能应用于"单击"事件。

不要将处理程序绑定到"单击"事件，而是绑定到表单提交事件(如果我在表单中并且我按 Tab 键转到提交按钮并按回车键，我已经提交了表单，但完全绕过了您的处理程序函数。这种情况也并不少见(。

如果你想按照你建议的方式去做，你还必须在消息框显示后给你的表单一个标志(我在下面的示例中使用了"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();
        }
      });
   }

});

我想你的实际提交按钮(#perm_del_submit(是一个<input type="submit"/>？让它成为<input type="button"/>？

为了验证表单或确认表单提交，我建议处理表单的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();
        }
    });
});

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

<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处理程序处理表单提交。 隐藏的输入值将已设置，并将指示哪个按钮触发了表单提交。

相关文章：