php - Ajax Login form gets submitted even if info is invalid -

i have called validate function onclick 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. want submit when responsetext "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 not supported 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 working. reason didn't work because not checking status , readystate of 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 not supported 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 needed     {     var data=xhr.responsetext.trim();             document.getelementbyid("login_feedback").innerhtml = data;             if (data=='correct'){                      document.getelementbyid("loginform").submit();                 }     }      }     } 

hope helps, thank you