javascript - Form submitting even when it is returning false -

i can't seem stop form submitting, when shown returning false. please me spot out error?

here html code:

<form role="form" onsubmit="return login()" action="03_select_survey.html">  <!-- username --> <div class="form-group">   <label for="user">username:</label>   <input type="text" class="form-control" id="user" placeholder="enter username"> </div>  <!-- password --> <div class="form-group">   <label for="pwd">password:</label>   <input type="password" class="form-control" id="pwd" placeholder="enter password"> </div>  <!-- submit button --> <button type="submit" class="btn btn-primary btn-lg">submit</button>  

and here javascript code:

function login() {   "use strict";    // variables   var username,     password,     xmlhttp,     isfound;    // username , password   username = document.getelementbyid("user");   password = document.getelementbyid("pwd");    // if username or password empty   if (username.value === "" || password.value === "") {     window.alert("incorrect username or password.");     return false;   } else {     // code ie7+, firefox, chrome, opera, safari     if (window.xmlhttprequest) {       xmlhttp = new xmlhttprequest();     } else { // code ie6, ie5       xmlhttp = new window.activexobject("microsoft.xmlhttp");     }     xmlhttp.onreadystatechange = function () {       if (xmlhttp.readystate === 4 && xmlhttp.status === 200) {         isfound = xmlhttp.responsetext;         // check if login info exists in database         if (isfound.value === "true") {           return true;         } else {           return false;         }       }     };   }   xmlhttp.open("get", "login.php?user=" + username.value + "&pass=" +      password.value, true);   xmlhttp.send();   if (xmlhttp.onreadystatechange === true) {       return true;   } else {       window.alert("why won't stop submitting?");       return false;   } } 

the code reaching "return false;" within ajax call, since alerting me message, when click ok, proceeds next page instead of staying on current page.

show @ least tag code well. short answer you're not stopping form post. xmlhttp asynchronus, when click submit button, command fired off, function "login()" exits without returning false. need return false function stop post.

here sample of do....

function login() {    "use strict";      // variables    var username,      password,      xmlhttp,      isfound;      // username , password    username = document.getelementbyid("user");    password = document.getelementbyid("pwd");      // if username or password empty    if (username.value === "" || password.value === "") {      window.alert("incorrect username or password.");      return false;    } else {      // code ie7+, firefox, chrome, opera, safari      if (window.xmlhttprequest) {        xmlhttp = new xmlhttprequest();      } else { // code ie6, ie5        xmlhttp = new window.activexobject("microsoft.xmlhttp");      }      xmlhttp.onreadystatechange = function() {        if (xmlhttp.readystate === 4 && xmlhttp.status === 200) {          alert('ajax response.....');          isfound = xmlhttp.responsetext;          // check if login info exists in database          if (isfound.value === "true") {            alert('we good! use javascript navigate new page...');            window.location = '03_select_survey.html';            return true;          } else {            alert('not ok! not allowed in!');            return false;          }        } else {          alert('ajax state change didn\'t expect.....');          return false; // in case need stop form post        }      };    }    xmlhttp.open("get", "login.php?user=" + username.value + "&pass=" + password.value, true);    xmlhttp.send();    return false; // false prevents form post if drop through before async ajax call finishes above  }

<form role="form" onsubmit="return login();">    <!-- form doesn't need action="03_select_survey.html" -->      <!-- username -->    <div class="form-group">      <label for="user">username:</label>      <input type="text" class="form-control" id="user" placeholder="enter username">    </div>      <!-- password -->    <div class="form-group">      <label for="pwd">password:</label>      <input type="password" class="form-control" id="pwd" placeholder="enter password">    </div>      <!-- submit button -->    <button type="submit" class="btn btn-primary btn-lg">submit</button>  </form>