用户输入正确密码后，如何使提交按钮重定向到另一个页面？答案

【问题标题】：How do you make a submit button redirect to another page after the user has inputted the correct password?用户输入正确密码后，如何使提交按钮重定向到另一个页面？
【发布时间】：2020-04-29 12:36:43
【问题描述】：

你能帮我找出问题所在吗？登录后，它应该将您重定向到另一个页面，但没有任何反应。用户名：Joshua，密码：Joshua#123。

<html>

<head>
  <title>Login: MessengerX</title>
  <link rel="stylesheet" type="text/css" href="C:\Users\Tania\Documents\Website\style.css">
  <meta charset="UTF-8">
  <meta name="description" content="HTML website called MessengerX. Send messages to anyone who has logged in.">
  <meta name="author" content="Joshua Hurley">
  <meta name="keywords" content="HTML, MessengerX, Joshua Hurley, Website, Supremefilms">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css" />
  <script type="text/javascript">
    var attempt = 3; // Variable to count number of attempts.
    // Below function Executes on click of login button.
    function validate() {
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      if (username == "Joshua" && password == "Joshua#123") {
        alert("Login successfully");
        location.replace("www.youtube.com"); // Redirecting to other page.
      } else {
        attempt--; // Decrementing by one.
        alert("You have " + attempt + " attempt left;");
        // Disabling fields after 3 attempts.
        if (attempt == 0) {
          document.getElementById("username").disabled = true;
          document.getElementById("password").disabled = true;
          document.getElementById("submit").disabled = true;
          return false;
        }
      }
    }
  </script>

  <script src="js/login.js"></script>
</head>

<body>
  <div class="imgcontainer">
    <img src="C:\Users\Tania\Documents\Website\Screenshots\face.jpg" height="500" alt="Avatar" class="avatar">
  </div>
  <div class="container">
    <div class="main">
      <h1 style="color:"><b><i>Login: MessengerX</i></b></h1>
      <form id="form_id" method="post" name="myform">
        <label>User Name :</label>
        <input type="text" name="username" id="username" />
        <label>Password :</label>
        <input type="password" name="password" id="password" />
        <button type="submit" value="Login" id="submit" onclick="validate()" />
      </form>
      <b><i>Submit</i></b>
    </div>
  </div>
</body>

</html>

【问题讨论】：

尝试将脚本移动到的底部，在所有其他 HTML 元素声明之后。

标签： javascript html authentication redirect

【解决方案1】：

试试这个：

window.location.replace("https://www.youtube.com")

【讨论】：

【解决方案2】：

您可以在window.addEventListener('load' 中移动代码，也可以在最后dom 之后移动脚本

建议：将整个 URL 与 HTTP 或 HTTPS 一起使用。

location.replace("https://www.youtube.com");

<script type="text/javascript">
    window.addEventListener('load', (event) => {
      var attempt = 3; // Variable to count number of attempts.

      /// code here
    });
  </script>

【讨论】：

【解决方案3】：

正如 leonardofmed 所提到的，最好将脚本放在 </body> 结束标记之前，因为需要先加载html，所以脚本才能看到元素，否则一开始还没有元素，所以会报错，至于重定向可以使用：

// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";

// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com");

【讨论】：

【解决方案4】：

改用<form><button type="button" ...

<form><button type="submit" ... 有它自己的逻辑（“魔法”），这就是问题所在。

在url location.replace("https://www.youtube.com")中使用协议，否则为相对路径

顺便说一句，从不在客户端验证密码！！！

【讨论】：