即使信息无效，Ajax登录表单也会被提交 [英] Ajax Login form gets submitted even if info is invalid

问题描述

我已经为提交按钮调用了验证函数onclick。
HTML

 < form role =formstyle =margin：0 20px 0 0; float：right method =postaction =login.phpid =loginform> 
< h3>登入< / h3> 
< div class =form-group> 
< label>使用者名称< / label> 
< input type =textclass =form-controlplaceholder =Enter usernamename ='username'id =username_input> 
< label>密码< / label> 
< input type =passwordclass =form-controlplaceholder =Passwordname =passwordid =password_input> 
< / div> 
< div id =login_feedback>< / div> 
< input type =submitvalue =Loginonclick =validate（）>< / input>< br /> 
< / form> 
  

JS

。我只想在responseText为正确时提交。

  function validate（）{
 var xhr; 
 if（window.XMLHttpRequest）{
 xhr = new XMLHttpRequest（）; 
} 
 else if（window.ActiveXObject）{
 xhr = new ActiveXObject（Msxml2.XMLHTTP）; 
} 
 else {
 throw new错误（此浏览器不支持Ajax）; 
} 
 var username = document.getElementById（username_input）。value; 
 var password = document.getElementById（password_input）.value; 
 xhr.open（'POST'，'validate.php'）; 
 xhr.setRequestHeader（Content-Type，application / x-www-form-urlencoded）; 
 xhr.send（username =+ username +& password =+ password）; 
 xhr.onreadystatechange = function（）{
 var data = xhr.responseText.trim（）; 
 document.getElementById（login_feedback）。innerHTML = data; 
 if（data =='correct'）{
 document.getElementById（loginform）。submit（）; 
} 
} 
返回false; 
）
 
} 
  

解决方案

试试这个，它正在工作。它没有工作的原因是因为你没有检查ajax请求的状态和readystate。

 函数validate（）{
 
 var xhr; 
 if（window.XMLHttpRequest）{
 xhr = new XMLHttpRequest（）; 
} 
 else if（window.ActiveXObject）{
 xhr = new ActiveXObject（Msxml2.XMLHTTP）; 
} 
 else {
 throw new错误（此浏览器不支持Ajax）; 
} 
 
 var username = document.getElementById（username_input）.value; 
 var password = document.getElementById（password_input）.value; 
 xhr.open（'POST'，'validate.php'，true）; 
 xhr.setRequestHeader（Content-Type，application / x-www-form-urlencoded）; 
 xhr.send（username =+ username +& password =+ password）; 
 xhr.onreadystatechange = function（）{
 if（xhr.readyState == 4&&xhr.status == 200）//这是必需的
 {
 var数据= xhr.responseText.trim（）; 
 document.getElementById（login_feedback）。innerHTML = data; 
 if（data =='correct'）{
 document.getElementById（loginform）。submit（）; 
} 
} 
 
} 
} 
  

希望这会有所帮助，谢谢

I have called the validate function onclick for the submit button. HTML

<form role="form" style="margin:0 20px 0 0; float:right" method="post" action="login.php" id="loginform">
    <h3>Login</h3>
    <div class="form-group" >
        <label>Username</label>
        <input type="text" class="form-control" placeholder="Enter username" name='username' id="username_input">
        <label >Password</label>
        <input type="password" class="form-control"  placeholder="Password" name="password" id="password_input">
    </div>
    <div id="login_feedback"></div>
    <input type="submit" value="Login" onclick="validate()"></input><br/>   
</form>

JS

The form gets submitted always. I want to submit only when responseText is "correct"

 function validate() {
   var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }
    var username = document.getElementById("username_input").value;
    var password = document.getElementById("password_input").value;
    xhr.open('POST', 'validate.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("username=" + username + "&password=" + password );    
    xhr.onreadystatechange = function () {
            var data=xhr.responseText.trim();
            document.getElementById("login_feedback").innerHTML = data;
            if (data=='correct'){
                     document.getElementById("loginform").submit();
                }
    } 
    return false;
    )

}

解决方案

Try this.It is working. The reason it didn't work is because you were not checking the status and readystate of the ajax request.

function validate() {

   var xhr;
     if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }

    var username = document.getElementById("username_input").value;
    var password = document.getElementById("password_input").value;
    xhr.open('POST', 'validate.php',true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("username=" + username + "&password=" + password );   
    xhr.onreadystatechange = function () {
 if (xhr.readyState==4 && xhr.status==200)   //this is needed
    {
    var data=xhr.responseText.trim();
            document.getElementById("login_feedback").innerHTML = data;
            if (data=='correct'){
                     document.getElementById("loginform").submit();
                }
    }

    } 
   }

Hope this helps, Thank you

这篇关于即使信息无效，Ajax登录表单也会被提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！