フォームがアクションを実行するのを止め、ajaxの実行が完了するのを待つ方法はありますか？

Question

お客様がpaypalに進む前に、アイテムがまだ利用可能かどうかを確認するためにデータベースをすばやく確認しています。問題は、Ajaxの実行中です。関数check_availability実行を継続し、Ajaxの完了前にフォームonsubmitにtrueを返します。その問題を解決するために、私は同じ関数を呼び出していました。しかし、私はそれが最良の選択肢だとは思わない。ここで

はコードです：

<form onsubmit="return check_availability(0,0,1)" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" id="pp1"> 

function ajax_paypal(orders){ 
    var htpr = new XMLHttpRequest(); 
    var url = "Hi there"; 
    var val = "orders="+orders; 
    htpr.open("POST", url, true); 
    htpr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    htpr.onreadystatechange = function(){ 
     if(htpr.readyState == 4 && htpr.status == 200){ 
      var sold_out_ids = htpr.responseText; 
      check_availability("continue", sold_out_ids, 0); 
     } 
    }; 
    htpr.send(val); 
} 

function check_availability(str, sold_out_ids, n) { 
    if (str === "continue") { 
     if (sold_out_ids > 0) { 
      alert("One of your items has sold out! Sorry for any inconvenience"); 
      location.reload(); 
      return false; 
     } else { 
      return true; 
     } 
    }else if(n === 1){ 
     var orders = []; 
     var x = document.cookie.split(';'); // your array of cookies 
     var i = 0; 
     x.forEach(item => { 
      //to make sure that item contains "order" 
      if (item.indexOf('order') > -1) { 
       var val = item.split("="); 
       orders[i] = val[1]+"o"; 
       i++; 

      } 
     }); 
     ajax_paypal(orders); 
    } 
    check_availability(0, 0, 0);//I keep calling this until Ajax is completed 
} 

Answer 1

あなたが解決するために、次のコードスニペットを使用することができます。これは提出時に呼び出されますが、実際の提出が起こる前に、ここからフォームを返すとpaypalに提出されます。あなたが偽のフォームを返す場合は提出しません。非同期の詳細について

$('#pp1').submit(function() { 
    var submitOrNot=await callcheck_availability(); 

    return true; // return false to cancel form submit 
}); 

async function callcheck_availability(){ 
//your function goes here 
} 

は、 `）あなたは` event.preventDefaultを（使用して提出上のフォームの送信を防止しようとすることができMDN