将值从文本框传递到不同的 HTML 页面
所以我有一个主页，提示用户在文本框中输入用户名。当用户单击文本框下方的“完成设置个人资料”按钮时，会将他们带到一个名为 createUser 的新 HTML 页面，其中包含多个文本框，提示用户填写密码、年龄、性别等。
createUser 中的第一个文本框将是用户名框。我希望用户从主页输入的用户名保存并显示在 createUser 中显示的文本框中。如果用户愿意，仍然可以使用此文本框编辑他们的用户名，但我希望如果用户在主页中输入“Sarah”，新页面上的用户名文本框将自动填充名称“Sarah”当它加载时，他们不必再次填写（但如果他们愿意，仍然可以编辑）。
我在网上发现了一些类似的问题，最后得到了下面的代码。它目前不起作用，想知道是否有人可以帮助我朝正确的方向前进？
主页.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="text" id="username" ><br><br>
</form>
<div id="createUser"><a href="createUser.html">FINISH SETTING UP PROFILE</a></div>
<script src="homepage.js"></script>
</body>
</html>
主页.js
function onClickHandler(){
location.href = 'createUser.html?name=' + document.getElementById('username').value;
}
创建用户.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FINISH FILLING OUT INFO</h2>
<form>
<input type="text" id="username" ><br><br>
</form>
<script src="createUser.js"></script>
</body>
</html>
创建用户.js
function parseQueryString(){
var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {
queryDict[item.split("=")[0]] = item.split("=")[1]
});
return queryDict;
}
function onLoadHandler(){
document.getElementById('username').value = parseQueryString().name;
}
红糖糍粑2回答
-
湖上湖
尝试在 homepage.js 上添加此内容，它将在用户单击链接时监听并在请求下一页之前更改 href。function onClickHandler(e){ document.querySelector('a').href = "createUser.html?name=" + document.getElementById('username').value; }window.onload = function() { document.querySelector('a').addEventListener('click', onClickHandler);}将其添加到 createUser.js 的末尾，以便它将在窗口加载后填充输入window.onload = onLoadHandler; -
大话西游666
我认为您上面的建议通过将用户名作为查询参数传递来听起来是正确的。我建议使用 URLSearchParams api，因为它将提供非常好的开发人员体验https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams到了这样的地步function parseQueryString(){var queryDict = {}location.search.substr(1).split("&").forEach(function(item) { queryDict[item.split("=")[0]] = item.split("=")[1]});return queryDict;}function onLoadHandler(){ document.getElementById('username').value = parseQueryString().name;}可以变成，输入查询字符串createUser.html?name= function parseQueryString(){ const queryParams = window.location.search; const searchParams = new URLSearchParams(paramsString); if(searchParams.has("name")){ return searchParams.get("name"); } return null } function onLoadHandler(){ const userNameFromQueryString = parseQueryString(); if(userNameFromQueryString){ document.getElementById('username').value = userNameFromQueryString } }然后在文件正文中你希望这个js执行add<body onload="onLoadHandler()">希望这个对你有帮助
随时随地看视频慕课网APP
相关分类
JavaScript