时间戳

首页 > 解决方案 > onsubmit 确认返回 false 时如何防止表单操作？

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

问题描述

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

问题是每次都运行 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.
  });
});

标签： jqueryhtmlformsonsubmit

解决方案

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

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

<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
    });
  });
});

推荐阅读