Question

以下代码在用户提交表单时运行：

$('#myForm').submit(function(e){
   e.preventDefault();
   var form = $(this);
   $('#yes').on('click', function(e){
      e.preventDefault()
      submit(form);
   });
});

哪个有效。

但是，如果您的用户反复点击“提交”，那么这些提交似乎排队，然后当用户点击“是”按钮时，所有排队的提交都会提交。

我只想在用户点击“是”时将最后一个表单提交提交到服务器。

你是怎么做到的？也许我需要某处return false，e.preventDefault()或e.preventPropagation

Answer 1

是否无法使用检查请求是否正在进行的变量？

var request_processing = false;

$('#myForm').submit(function(e){
   e.preventDefault();
   var form = $(this);
   $('#yes').on('click', function(e){
      e.preventDefault()
      if (request_processing) {
         return;
      }

      request_processing = true;

      submit(form); // Set it to false once the request is complete.
   });
});

另一种途径可能是在第一次点击完成后禁用按钮，这也会向用户表明正在处理它，可能在它旁边添加一个小的加载gif。然后在请求完成后重新设置按钮。

Answer 2

你还没有发布你的ajax代码，但这是你可以做的：

$('#yes').on('click', function(e){
   e.preventDefault()
   submit(form);
   $(this).prop('disabled', true);
});

然后在你的ajax成功函数中你可以这样启用它：

$.ajax({
  ......
  success: function(){
     $('#yes').prop('disabled', false);
  }
});

注意：

但这不会多次提交。

Answer 3

每次提交表单时，您都会将新功能绑定到yes按钮单击事件。因此，当您单击“是”按钮时，将运行所有功能。

相反，尝试在表单提交事件之外的yes按钮上创建一次事件侦听器：

$('#yes').on('click', function(e){
   e.preventDefault()
   var form = $('#myForm');
   submit(form); // I assume this is the function that makes the ajax request
});

您仍然应该阻止表单上的默认事件，并且根据表单的工作方式，您可能希望添加注释行为：

$('#myForm').submit(function(e){
    e.preventDefault();
    // validate all required fields
    // then show/enable 'yes' button (you could disable submit button too)
}

仅提交上次AJAX请求

3 个答案:

注意：