ajaxリクエストが完了するまでフォームのリクエストを停止

Question

ajaxを使用してコードを作成しているうちに、問題が見つかりました。以下は私のコードの切り札です。

<script type="text/javascript"> 
    function xmlHttp(){ 
     if(window.XMLHttpRequest){ 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else{ 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     return xmlhttp; 
    } 

    function addData(a, b, c){ 
     xmlhttp = xmlHttp(); 
     xmlhttp.onreadystatechange = function(){ 
      if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
       alert("Response : " + xmlhttp.responseText); 
      } 
     } 
     link = "test.php?a="+a+"&b="+b+"&c="+c; 
     xmlhttp.open("GET",link,true); 
     xmlhttp.send(); 
    } 
</script> 
<center> 
    <form method="POST" action="?page=search.php"> 
     <table width="400" border="1"> 
      <tr> 
       <td align="right"><button onclick="return addData(1,2,3);">Add data</button></td> 
      </tr> 
     </table> 
    </form> 
</center> 

オンボタンをクリックすると、ajaxリクエストが呼び出されます。 ajaxリクエストが完了する前に、送信が行われます。 ajaxリクエストが完了するまでフォームの送信を待つために何をすべきか。

このリンクは鉱山と似ています。 Sending an Ajax request before form submit

これを行うと、他のフォームは送信されません（他の入力タイプ）。 POST配列は空のままです。

Answer 1

AJAXリクエストが完了するまでユーザーがフォームを送信しないことを希望する場合は、リクエストを送信するときにフォームを無効にし、レスポンスを受信すると有効にすることができます。さらに、読み込み中... gifを表示して、何かが起こっていることをユーザーに伝えることができます。

更新：このように書くことができます。 SubmitBtnIdを送信ボタンのIDに置き換えてください。

<script type="text/javascript"> 
    function xmlHttp(){ 
     if(window.XMLHttpRequest){ 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else{ 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     return xmlhttp; 
    } 

    function addData(a, b, c){ 
     xmlhttp = xmlHttp(); 
     xmlhttp.onreadystatechange = function(){ 
      if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
       alert("Response : " + xmlhttp.responseText); 
       Document.getElementById('SubmitBtnId').disabled=false; 
      } 
     } 
     link = "test.php?a="+a+"&b="+b+"&c="+c; 
     Document.getElementById('SubmitBtnId').disabled=true; 
     xmlhttp.open("GET",link,true); 
     xmlhttp.send(); 
    } 
</script>