Question

我想阻止根据AJAX响应提交主表单。

HTML就是这样......

<form action="test.php" method="POST">
   <input type="text" name="email" id="email" onblur="ajax_check_email();">
   <span id="email_alert"></span>
    <input type="submit" name="submit">
</form>

现在我有一个带有ajax查询的js文件 -

function ajax_email_check () {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("email_alert").innerHTML=xmlhttp.responseText;
        }
      }
    var email = document.getElementById("email").value;
    xmlhttp.open("GET","ajax/check_email.php?email=" + email,true);
    xmlhttp.send();
}

现在php页面返回Email Already Exists或Success。

一切顺利，但在显示文本后“电子邮件已存在......！”当我点击提交时，主表单将被提交。它应该阻止我。但是我该怎么做呢？

Answer 1

抓住事件并停止。

<form id="myform" action="test.php" method="POST">
<script>
$('form#myform').submit(function(e){
    e.preventDefault();
});
</script>

Answer 2

您可以在ajax回复中添加var shouldSubmit = false之类的标记，如果可以提交，则将shouldSubmit更改为true，然后添加eventlistener以形成

<script>
    yourform.addEventListener("submit", function(e){
    if(!shouldSubmit){
        e.preventDefault();
        return false;
       }
    });
</script>

Answer 3

只需在表单标记 onsubmit="return false;"

中添加

喜欢这个 -

<form action="test.php" method="POST" onsubmit="return false;">
<input type="text" name="email" id="email" onblur="ajax_check_email();">
<span id="email_alert"></span>
<input type="submit" name="submit">
</form>

如何通过AJAX防止PHP表单提交？

3 个答案: