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

Question

So I have a homepage where the user is prompted to enter a username in a textbox.所以我有一个主页，提示用户在文本框中输入用户名。 When the user clicks the button beneath the textbox that says 'FINISH SETTING UP PROFILE', it will take them to a new HTML page called createUser which contains several more textboxes, prompting the user to fill out a password, age, gender, etc.当用户单击文本框下方的“完成设置配置文件”按钮时，它会将他们带到一个名为 createUser 的新 HTML 页面，其中包含多个文本框，提示用户填写密码、年龄、性别等。

The first of those textboxes in createUser will be a username box. createUser 中的第一个文本框将是用户名框。 I want the username the user entered from the homepage to save and display within the textbox shown in createUser.我希望用户从主页输入的用户名保存并显示在 createUser 中显示的文本框中。 The user can still edit their username if they want to with this textbox, but I would like it so that if the user entered "Sarah" in the homepage, the username textbox on the new page will automatically be filled with the name "Sarah" when it loads so they don't have to fill it in again (but can still edit if they want).如果用户想使用这个文本框，他们仍然可以编辑他们的用户名，但我希望这样如果用户在主页输入“Sarah”，新页面上的用户名文本框将自动填充名称“Sarah”当它加载时，他们不必再次填写（但如果他们愿意，仍然可以编辑）。

I found a few similar questions online and ended up with the code below.我在网上找到了一些类似的问题，最后得到了下面的代码。 It doesn't currently work, and was wondering if someone could help push me in the right direction?它目前不起作用，想知道是否有人可以帮助我朝着正确的方向前进？

homepage.html主页.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主页.js

function onClickHandler(){
    location.href = 'createUser.html?name=' + document.getElementById('username').value;
}

createUser.html创建用户.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创建用户.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;
}

Answer 1

Try adding this on the homepage.js It will listen when the user clicks the link and change the href before requesting the next page.尝试在 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);
}

Add this at the end of createUser.js so it will fill the input after the window has loaded将此添加到 createUser.js 的末尾，以便在窗口加载后填充输入

window.onload = onLoadHandler;

Answer 2

I think what you are suggesting above sounds right by passing the username as a query param.我认为通过将用户名作为查询参数传递，您在上面的建议听起来是正确的。 I'd recommend using the URLSearchParams api as it will give a really nice developer experience我建议使用 URLSearchParams api，因为它会给开发人员带来非常好的体验

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

To the point where到点

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

Can become, with input query string of createUser.html?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
     }
    }

Then in the body of the file you want this js to execute add然后在你希望这个js执行的文件正文中添加

<body onload="onLoadHandler()">

Hope this is of some help希望这个对你有帮助

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-10-30 15:03:02

解决方案2
0 2020-10-30 15:03:03

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-10-30 15:03:02

解决方案2 0 2020-10-30 15:03:03

解决方案1
0 已采纳 2020-10-30 15:03:02

解决方案2
0 2020-10-30 15:03:03