Question

我正在尝试登录，用户在表单中提交他们的用户名，然后该用户名被转移到另一个页面并保存为名称输入字段中的值。第二页上保存的用户名显示为 [object HTMLInputElement]，而这应该是他们在第一页上输入的用户名。

index.html（第一页）

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
  <meta charset="utf-8">
  <title>Login Form</title>

  <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <form id ="form" action="results.html" method="get">
    <div class="login-box">
      <div id="error"></div>
      <h1>Login</h1>

      <div class="textbox">
        <i class="fas fa-user"></i>
        <input id="name" type="text" placeholder="Username" name="name" required>
      </div>
      <button type="submit" id ="submit">Sign in</button>
      <button type="reset" name="reset" id = "reset">Reset</button>

    </div>
    </form>
  </body>
</html>

results.html（第二页）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Results</title>
  </head>
  <body>
<div id = "results"></div>
  <a href="/">Back to Form</a>

  <form id ="form" action="results.html" method="get">
  <div class="login-box">
    <div id="error"></div>
    <h1>Login</h1>

    <div class="textbox">
      <i class="fas fa-user"></i>
      <input id="name" type="text" name="name">

      <script type="text/javascript">
        document.getElementById('name').setAttribute('value', document.getElementById('name'))
      </script>
    </div>

    <div class="textbox">
      <i class="fas fa-user"></i>
      <input id = "password" type="password" placeholder="Password" name="password" value="">
    </div>


    <button type="submit" id ="submit">Sign in</button>
    <button type="reset" name="reset" id = "reset">Reset</button>


  </div>
  </body>
</html>

为清楚起见进行编辑：我正在尝试重新创建登录功能，例如 this website's Online Login

Answer 1

在 results.html 更改脚本中：

    <div class="textbox">
      <i class="fas fa-user"></i>
      <input id="username" type="text" name="name">
      <script type="text/javascript">
        let params = new URLSearchParams(window.location.search)
        let name = params.get("name")
        document.getElementById('username').setAttribute('value', name)
      </script>
    </div>

Answer 2

您最好使用 HTML/JS 粗略地运行前端检查，以确保数据不会故意通过，如果通过，服务器会检索 POST。如果这是您在表单中使用的内容，这将包含用户名/密码字段。

服务器可以选择在失败时重定向发送此数据，但重要的是如何完成这件事不应该像

login?fail=true&user=testaccount&password=10924909042

这行得通，但这是一个很大的问题，所以如果使用 PHP 或您选择的语言，您将使用插入到表单中的帖子数据呈现登录页面，而不是通过 URL 传递它。

Answer 3

在脚本的第二页试试这个：

var username = document.querySelector("#name").value

无论你想把它放在哪里，说：

document.getElementById(id).innerHTML = username

将表单的输入值设置为上一个表单的值

3 个答案: