Question

我似乎无法阻止我的表单提交，即使它显示它返回false也是如此。有人可以帮我发现错误吗？

这是我的HTML代码：

<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>

这是我的JavaScript代码：

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;
  }
}

代码到达＆＃34;返回false;＆＃34;在AJAX调用中，因为它正在通过消息提醒我，但是当我单击OK时，它会进入下一页而不是停留在当前页面上。

Answer 1

至少向我们展示标签代码。但简短的回答是你没有停止表格发布。 xmlHttp是异步的，因此当您单击提交按钮时，该命令将被触发，但函数“login（）”退出WITHOUT返回false。您需要从该函数返回false以停止POST。

以下是我要做的事情的样本....

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>

表单提交即使返回false

1 个答案: