jquery - 当 onsubmit 确认返回 false 时如何防止表单操作？

Question

在我的 HTML 表单中，我想在用户转到下一页之前显示一个 confirm() 框。我在 form 上使用带有 onsubmit 属性的 jQuery AJAX。

问题是 AJAX 请求每次都会运行，即使我单击确认对话框中的取消按钮也是如此。当用户点击确认框中的“取消”时，如何停止AJAX请求？

<form onsubmit="return confirm('Do You want to Continue?');" action="#" id="renewbyuser" method="POST">
  <input class="renew button dark-gray" type="submit" name="renewnow" value="Renew Now">
</form>

$(document).ready(function() {
  $("#renewbyuser").submit(function(e) {
    $.ajax({
      // ajax runs here
    });

    e.preventDefault(); // avoid to execute the actual submit of the form.
  });
});

Answer 1

问题是因为您分配了两个单独的事件处理程序，因此尽管您根据 confirm() 的结果阻止了第一个事件处理程序，但您监听的 submit 事件通过 jQuery 仍然会触发。

要解决此问题，请将 confirm() 调用放入 submit 事件处理程序中，并从 form 中删除 onsubmit 属性HTML 中的 标记:

<form action="#" id="renewbyuser" method="POST">
  <input class="renew button dark-gray" type="submit" name="renewnow" value="Renew Now" />
</form>

$(document).ready(function() {
  $("#renewbyuser").submit(function(e) {
    e.preventDefault();

    if (!confirm('Do You want to Continue?'))
      return;

    $.ajax({
      // ajax runs here
    });
  });
});