jquery：防止在第一个事件完成之前重新提交表单

Question

我有一个通过 Ajax / jQuery 拦截的表格。这里的问题是，如果某些字段未填写，我会显示从 textStatus 到错误 div 的错误。然后我的函数完全删除 div 并在删除原始的后重新插入一个新的空的（为了显示错误再次使用 div ）。发生的情况是，如果我多次提交表单，新错误 div 将在 dom 中插入多次，并且错误将立即在原始错误 div 中出现三次.我当然只需要显示一个错误 div 和一组错误。我的脚本如下：

jQuery(function ($) {
    $(document).ready(function () {

        $("#AddModel").on("submit", function (e) {

            var SubmitButton = $("#AddBtn");

            SubmitButton.blur();

            var form = $(this);

            var postData = new FormData($("#AddModel")[0]);

            var errors = $('#errors');

            var theForm = $('#theForm');

            var divAlert = "<div id=\"errors\">AAA<\/div>";

            $.ajax({
                type: 'POST',
                url: form.prop('action'),
                processData: false,
                contentType: false,
                data: postData,
                success: function (data) {

                    console.log(data);

                },

                error: function (textStatus) {

                    var json = JSON.parse(textStatus.responseText);

                    $.each(json, function (key, value) {

                        var errorVar = "";
                        errorVar += "<div id=\"error\" class=\"col-lg-6 alert alert-danger\">";
                        errorVar += "" + value + "";
                        errorVar += "<a class=\"close\" data-dismiss=\"alert\">×<\/a>";
                        errorVar += "<\/div>";

                        errors.append(errorVar);

                    });

                    if (errors.is(":visible")) {

                        errors.not('.alert-important').delay(7000).fadeOut(350).promise().done(function () {

                            errors.remove().promise().done(function () {

                                $(divAlert).insertAfter(theForm);


                            })

                        });

                    }

                }

            });
            e.preventDefault();
        });
    });
});

比如初期我在页面中会有这样的情况：

<div id="errors"></div>

如果我最后连续按提交按钮 3 次，在显示错误并删除 div 之后，我将在页面中看到这种情况：

<div id="errors"></div>
<div id="errors"></div>
<div id="errors"></div>

插入这三个元素之前发生的事情是：

<div id="errors" style="display: none;">

我想这是在脚本的 fadeOut(350) 部分。

我想要实现的是，如果按下按钮，然后等待脚本完成，然后能够再次提交。我不喜欢超时选项，因为我不知道浏览器将花费多少时间来显示错误，然后删除并重新插入错误 div。那么，在脚本的这一部分结束之前，我该如何禁用后续提交呢？ ->

if (errors.is(":visible")) {

                        errors.not('.alert-important').delay(7000).fadeOut(350).promise().done(function () {

                            errors.remove().promise().done(function () {

                                $(divAlert).insertAfter(theForm);


                            })

                        });

                    }

Answer 1

您可以通过在 on('submit') 函数之前声明一个变量来跟踪您的脚本进度，并使用它来限制提交：

jQuery(function ($) {
  $(document).ready(function () {

    var isEnded=true;
    $("#AddModel").on("submit", function (e) {

      if(isEnded){
        isEnded=false;
         .... YOUR CODE
      }

    });
  });
});

当您的特定代码部分结束时，只需添加：

isEnded=true;

jquery：防止在第一个事件完成之前重新提交表单

jquery: prevent resubmission of form until first one event is done

php

forms

jquery

submit