将值从文本框传递到不同的 HTML 页面答案

【问题标题】：Passing value from textbox to a different HTML page将值从文本框传递到不同的 HTML 页面
【发布时间】：2020-10-30 14:50:42
【问题描述】：

所以我有一个主页，提示用户在文本框中输入用户名。当用户点击“完成设置配置文件”文本框下方的按钮时，它会将他们带到一个名为 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;
}

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;
}

【问题讨论】：

onLoadHandler() 被调用了吗？我没有看到它在 HTML 或 JS 中被调用

标签： javascript html button onclick textbox

【解决方案1】：

尝试在 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;

【讨论】：

【解决方案2】：

我认为通过将用户名作为查询参数传递，您上面的建议听起来是正确的。我建议使用 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()">

希望对你有所帮助

【讨论】：