在表單提交之前發出ajax請求，並在完成ajax後提交數據

Question

我的頁面上有一個提交按鈕的表單。當用戶點擊按鈕時，我想發出一個ajax請求，如果該請求返回正確的結果，請繼續提交表單。

然而，這有點棘手，因爲表單在獲得響應之前被提交，也不關心響應是什麼。你如何創建這樣的功能？

我試着將提交按鈕設置爲禁用，但比單擊事件根本沒有得到註冊。

$(".submit-button").click(function() { 
    $.post("exists.php",{ email: email}, function(data) { 
     if (data=="wrong result") { 
      // display error the the user 
     } else { 
      //proceed with submitting form 
     } 
    }); 
} 


<form action="register" method="post"> 
    <fieldset class="c-fieldset"> 
     <label class="input-data"> Email: <input type="email" name="email-address" required > </label> 
    </fieldset> 
    <input type="submit" class="submit-button" value="Submit"> 
</form> 

Answer 1

使用e.preventDefault()防止全自動提交，檢查，如果結果是贏得成功使用形式.submit()功能。 （我已經添加了一個id形式）

$(".submit-button").on("click", function(e) { 
 

 
     e.preventDefault(); // prevent submitting form here 
 
     var email = $("[name='email-address']").val(); 
 
     $.post("exists.php", { 
 
      email: email 
 
     }, function(data) { 
 
      if (data == "wrong result") { 
 
      // display error the the user 
 
      } else { 
 
      //proceed with submitting form 
 
      $("#myForm").submit(); 
 
     
 
      } 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="register" method="post" id="myForm"> 
 
    <fieldset class="c-fieldset"> 
 
    <label class="input-data"> Email: <input type="email" name="email-address" required > </label> 
 
    </fieldset> 
 
    <input type="submit" class="submit-button" value="Submit"> 
 
</form>

Answer 2

可以在別的塊submit形式

$(".submit-button").click(function(e) { 
// prevent the default behavior of the form 
e.preventDefault(); 
     $.post("exists.php", { 
      email: email 
     }, function(data) { 
      if (data == "wrong result") { 
      // display error the the user 
      } 
     } else { 
      $("#myForm").submit(); 
     } 
     } 
    } 

<form action="register" method="post" id = 'myForm'> 
    // Added id to form 
    // rest of the code 
</form>