如何解决将值从文本框传递到另一个HTML页面
因此,我有一个主页,提示用户在文本框中输入用户名。当用户单击文本框下方的“完成设置配置文件”按钮时,它将带他们进入一个名为createUser的新HTML页面,其中包含更多文本框,提示用户填写密码,年龄,性别等。
createUser中的第一个文本框将是一个用户名框。我希望用户从主页输入的用户名可以保存并显示在createUser中显示的文本框中。用户仍然可以使用此文本框编辑用户名,但是我希望这样做,以便如果用户在主页中输入“ Sarah”,新页面上的用户名文本框将自动填充名称“ Sarah”当它加载时,他们不必再次填写(但仍可以根据需要进行编辑)。
我在线上找到了一些类似的问题,最后得到了下面的代码。它目前不起作用,想知道是否有人可以帮助将我推向正确的方向?
homepage.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>
homepage.js
function onClickHandler(){
location.href = 'createUser.html?name=' + document.getElementById('username').value;
}
createUser.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>
createUser.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;
}
解决方法
尝试将其添加到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;
,
我认为您通过将用户名作为查询参数来正确传达上述建议。我建议使用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执行添加的文件正文中
<body onload="onLoadHandler()">
希望这对您有所帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。