为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

红糖糍粑 2023-06-29 15:50:54
所以我有一个主页,提示用户在文本框中输入用户名。当用户单击文本框下方的“完成设置个人资料”按钮时,会将他们带到一个名为 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> 主页.jsfunction 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> 创建用户.jsfunction 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 回答

?
湖上湖

TA贡献2003条经验 获得超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;


查看完整回答
反对 回复 2023-06-29
?
大话西游666

TA贡献1817条经验 获得超14个赞

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


希望这个对你有帮助


查看完整回答
反对 回复 2023-06-29
  • 2 回答
  • 0 关注
  • 140 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信