jquery：最初の1つのイベントが完了するまでフォームの再送信を防止する

Question

私はAjax/jQueryで傍受しているフォームを持っています。 ここでの問題は、一部のフィールドが入力されない場合です。textStatusのエラーをdivに表示します。 私の関数はdivを完全に削除し、元のdivを削除した後に新しい空の空白をもう一度挿入します。 フォームを複数回送信すると、新しいエラーdivがdomに複数回挿入され、元のエラーdivにエラーが3回表示されます。もちろん、私は1つのエラーdivと1セットのエラーだけを表示する必要があります。 私のスクリプトは次のとおりです。私は後に、最後に行のボタンを3回提出押すと

：

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を削除：

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

これらの3つの要素の挿入がある前に右何が起こる：

<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

あなたのスクリプトの進行は（「提出」）あなたの前に変数権利を宣言することによって、トレース機能や提出を制限するためにそれを使用することができます：

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

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

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

    }); 
    }); 
}); 

コードの特定の部分がある場合には以上、ちょうど追加：

isEnded=true;