将表单的输入值设置为前一个表单的值答案

【问题标题】：Set input value of form to a value from previous form将表单的输入值设置为前一个表单的值
【发布时间】：2021-05-08 07:51:24
【问题描述】：

我正在尝试登录，用户在表单中提交其用户名，然后该用户名被带到另一个页面并保存为名称输入字段中的值。第二页上保存的用户名显示为[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

【问题讨论】：

每个 HTML 标签中的 id 应该是唯一的，即使它们位于不同的文件中。您应该重命名您的输入 ID 之一
@NekoMi 说什么？这是什么规定？
因为这行真的很混乱：document.getElementById('name').setAttribute('value', document.getElementById('name'))
@ChanMT ，@NekoMi 是对的。这个项目/示例有点仓促，但您可以在我的回答中看到我做到了username，谢谢！
@RyM 在您的回答中，您正在从查询字符串中获取值。只要您将正确的 id 传递给 getElementById，您的答案将同样适用于输入 id 作为“名称”而不是“用户名”。我指的是声明“每个 HTML 标记中的 id 应该是唯一的，即使它们位于不同的文件中。”

标签： javascript html forms authentication web

【解决方案1】：

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

服务器可以选择在发送此数据失败时重定向，但重要的是，完成此操作的方式不应该像

那样简单

这会起作用，但这是一个很大的错误，因此使用 PHP 或您选择的语言，您将使用插入表单的帖子数据呈现登录页面，而不是通过 URL 传递它。

【讨论】：

如果这是在没有处理器帮助的情况下完成的，严格来说，HTML/JS 你可能很快就会想到 URL 传递，所以像 PHP/NodeJS/ASP 这样的处理器这些是完整动态结果所必需的。

【解决方案2】：

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

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

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

document.getElementById(id).innerHTML = username

【讨论】：

【解决方案3】：

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

【讨论】：