在多个ajax调用完成之前，如何防止表单提交？jquery

接下来，我问了一个问题，在所有ajax调用返回完毕之前，是否要禁用submit按钮

即使按钮被禁用并有警告标志，人们似乎仍在设法提交表单。我猜可能是在文本输入中按“回车”键造成的

如何禁用整个表单，而不仅仅是“提交”按钮

到目前为止，守则是：

// if we're waiting for any ajax to complete we need to disable the submit
$(document).ajaxStart(function() {
  $(".ajaxbutton").attr("disabled", "disabled");
  // if it's taken longer than 250ms display waiting message
  timer = setTimeout(function() {
    $('#processingAlert').html(' ...please wait one moment');
    $('#processingAlert').show();
  }, 250);
})
$(document).ajaxComplete(function() {
  $(".ajaxbutton").removeAttr("disabled");
    $('#processingAlert').hide();
    // cancel showing the message when the ajax call completes.
clearTimeout(timer);
});

我应该提到的另一件可能导致问题的事情是，有多个ajax调用同时发生，例如一个div接收隐藏的输入，而页面上其他地方的另一个div显示一个总价

一些ajax调用正在快速完成这一事实会否定ajaxStart的禁用效果吗？例如ajax调用1和ajax调用2都会启动ajaxStart-调用1完成得非常快，在我们等待调用2完成时它会重新启用表单吗

---

有没有更好的方法来测试是否所有ajax调用都已完成？

您可以为表单的提交事件添加事件处理程序。事件处理程序可以检查是否允许提交，如果不允许则中止。以下是一些文档：

请注意，如果页面上的javascript调用其中一个表单提交按钮上的.click（），则表单将在不调用.submit（）处理程序的情况下提交。这是一个奇怪的jQuery问题（），我猜想jQuery的人不会考虑bug。我希望不会有其他类似的情况

---

如果您使用的是ASP.NET，则根据表单上的内容，ASP.NET可能会插入一个“\uu doPostBack”函数。您可能需要通过使用一些调用原始函数的自定义代码重新定义该函数来钩住该函数。

创建一个全局变量如何：

  var i = 0;

每个AJAX调用在调用开始时递增该变量，完成后递减该变量

提交表单时，检查此变量是否大于0并阻止提交

  function submitForm(){
      return i == 0;
  }

<form onsubmit="submitForm()"....>

</form>

函数submitForm（）{
返回i==0；
}

您可以为每个ajax调用设置一个具有多个属性的JS对象。例如：

var requiredCalls = {call1: false, call2: false, call3: false}

在表单提交时，通过每个属性循环检查是否为true。如果有错误，请不要提交表格

当每个ajax调用完成时，将其属性（call1、call2等）设置为true

---

这是一种方法，我不知道这是否是最好的方法。

我想你有这样的代码：

var form = $(...);
form.bind ('submit', function (...) {
  $.ajax (
    ...,
    complete: function (...) {
      // do something
    }
  );
}

你可以这样做：

var form = $(...);
form.bind ('submit', function (...) {
  if ($ (this).data ('inprogress') === null) {
    $ (this).data ('inprogress', 1);
    // disable submit button
    $.ajax (
      ...,
      complete: function (...) {
        // do something
        $ (this).data ('inprogress', null)
        // enable submit button
      }
    );
  } else {
    // display notification / warning
  }
}

---

我几乎解决了这个问题，但不知何故，人们似乎仍然能够在回调完成之前提交表单

我不知道这是否巧合，但所有设法提交它的人都在Mac上使用Safari

这是我正在使用的方法，如果有人能发现逻辑上的缺陷，那就太好了

根据文森特的建议：

// set this to zero before any ajax calls are made  
var ajaxcallcounter = 0;

例如，当我调用ajax时：

    // UPDATE SHIPPING BOXES
    var data = 'pickup=1';
    ajaxcallcounter++;
    $.ajax({
    type: "POST",
    url: "incViewbasketShippingBoxes.php", 
    data: data,
    success: function(response) {
        $('#shippingBoxes').html(response);
            ajaxcallcounter--;
    }
    });

这是工作良好，我也有一个很好的小脚本给用户反馈-按钮是灰色的，而等待ajaxcounters返回，如果它需要超过250毫秒，动画也显示出来。所有ajax调用完成后，计数器返回到零，按钮显示为正常：

// when ajaxStart is triggered, keep an eye on the ajaxcallcounter
$(document).ajaxStart(function() {
  $(".ajaxbutton").attr("disabled", "disabled");
  $('#processingAlert').html(' ...calculating');
  $('#processingAlert').show();

  // if it's taken longer than 250ms (say) display waiting message
  timer = setTimeout(function() {
    $('#processingAlert').html(' ...calculating <img src="../gfx-site/ajax-loader.gif">');
  }, 250);
});
// when ajaxComplete is triggered, keep an eye on the ajaxcallcounter
$(document).ajaxComplete(function() {
    if (ajaxcallcounter == 0) {
        $(".ajaxbutton").removeAttr("disabled");
        $('#processingAlert').hide();
        // cancel showing the message when the ajax call completes.
    clearTimeout(timer);
    }
});

有人能看出我做错了什么吗

---

谢谢

从手册中可以看出，这听起来是正确的：$（“表单”）.submit（函数（）{if（$（$（“输入：第一”）.val（）==“correct”）{$（$（$）.text（“已验证…”）。show（）；return true；}$（$）.text（“无效！”）.show（）.fadeOut（1000）；return false；}）；因此，如果我检查所有ajax调用是否已完成，我可以返回true。我用的是PHP，所以很遗憾不能使用ASP函数。PS有人能告诉我如何在注释中插入格式化的代码吗？我似乎总是把所有东西都挤在一行上。我认为你不能在注释中格式化代码。我会继续补充你的问题。这听起来是个好主意，但是在这个页面上可能会有几个不同的电话，并不是所有的电话都是由每个客户触发的。我会想一想。在这种情况下，如果我理解正确，你会将它们的默认值设置为true。当ajax调用被触发时，您可以在requiredCalls中将其属性设置为false，并将oncomplete/onsuccess设置为true。这听起来非常通用。在ajax调用中，我们在哪些点递增/递减。增量是否正好在$.ajax之后({我可以想象，在ajaxStart函数开始时递增，在ajaxComplete函数开始时递减这似乎是个好主意，但当我尝试时，所有3个ajax调用同时启动，计数器的值为1。然后，当它们在不同的时间完成时，计数器变为-2。

// can we submit yet?
  $('#checkoutform').submit(function() {
    if (ajaxcallcounter == 0) {
      return true;
    }
    return false;
  });