表单即使返回假也提交

Question

I can't seem to stop my form from submitting, even when it is shown that it is returning false. Could someone please help me spot out the error?

Here is my 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 is my JavaScript code:

function login() {
  "use strict";

  // Variables
  var username,
    password,
    xmlhttp,
    isFound;

  // Get username and password
  username = document.getElementById("user");
  password = document.getElementById("pwd");

  // If username or password is empty
  if (username.value === "" || password.value === "") {
    window.alert("Incorrect username or password.");
    return false;
  } else {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else { // code for 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 you stop submitting?");
      return false;
  }
}

The code is reaching the "return false;" within the AJAX call, since it is alerting me with the message, but when I click OK, it proceeds to the next page instead of staying on the current page.

Answer 1

Show us at least the tag code as well. But the short answer it you're not stopping the form post. xmlHttp is asynchronus, so when you click your submit button, the command is fired off, but the function "login()" exits WITHOUT returning false. You need to return false from that function to stop the POST.

Here is a sample of what I would do....

 function login() { "use strict"; // Variables var username, password, xmlhttp, isFound; // Get username and password username = document.getElementById("user"); password = document.getElementById("pwd"); // If username or password is empty if (username.value === "" || password.value === "") { window.alert("Incorrect username or password."); return false; } else { // code for IE7+, Firefox, Chrome, Opera, Safari if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { // code for 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 are good! Use JavaScript to navigate to new page...'); window.location = '03_select_survey.html'; return true; } else { alert('Not OK! They are not allowed in!'); return false; } } else { alert('AJAX State Change we didn\\'t expect.....'); return false; // In case we need to stop the form POST } }; } xmlhttp.open("GET", "login.php?user=" + username.value + "&pass=" + password.value, true); xmlhttp.send(); return false; // This false prevents FORM POST if we drop through before the async AJAX call finishes above } 

 <form role="form" onsubmit="return login();"> <!-- The 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>