我正在尝试登录,用户在表单中提交他们的用户名,然后该用户名被转移到另一个页面并保存为名称输入字段中的值。第二页上保存的用户名显示为 [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
答案 0 :(得分: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>
答案 1 :(得分:0)
您最好使用 HTML/JS 粗略地运行前端检查,以确保数据不会故意通过,如果通过,服务器会检索 POST。如果这是您在表单中使用的内容,这将包含用户名/密码字段。
服务器可以选择在失败时重定向发送此数据,但重要的是如何完成这件事不应该像
login?fail=true&user=testaccount&password=10924909042
这行得通,但这是一个很大的问题,所以如果使用 PHP 或您选择的语言,您将使用插入到表单中的帖子数据呈现登录页面,而不是通过 URL 传递它。
答案 2 :(得分:0)
在脚本的第二页试试这个:
var username = document.querySelector("#name").value
无论你想把它放在哪里,说:
document.getElementById(id).innerHTML = username