onsubmit confirm return false时如何防止表单操作？

Question

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

问题是 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() 的结果阻止了第一个事件，但您通过 [=23= 侦听的 submit 事件] 仍然开火。

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

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

Answer 2

简单的方法就是不使用表单向后台提交数据。您只需要使用 ajax 到 post 数据并防止这样的操作：

HTML:

<form>
  <button class="renew button dark-gray" id='btn-submit' name="renewnow" value="Renew Now">    
</form>

jQuery:

$(document).ready(function() {
  $("#btn-submit").on('click',(e) =>{
    let check =confirm("do u want to continue!");
    if(check){
      $.ajax({
        type : 'post',
        url: 'formSubmitUrl'
        data : dataForm
      }).done((result)=>{});
    } 
  });
});

或使用 jqueryForm 库来做你想做的事

onsubmit confirm return false时如何防止表单操作？

How to prevent form action when onsubmit confirm return false?

jquery

html

forms

onsubmit