如何在提交表单后 go 到新页面，并让新页面显示来自表单的处理信息？
[英]How can I go to a new page after a form is submitted, and have the new page display processed information from the form?
问题描述
My actual code is a bit more complex, but to simplify my question, it's basically like I have a textbox in which asks for the user's name, and once they press submit, I want them to be redirected to a new page that states "Thank you _________", and the blank would be the name they submitted in the previous form.
我的实际代码有点复杂，但为了简化我的问题，基本上就像我有一个文本框询问用户的姓名，一旦他们按下提交，我希望他们被重定向到一个新页面，上面写着“谢谢你 _________”，空白处就是他们在之前的表格中提交的姓名。
As of right now, after they press submit, they stay on the same page and once they press submit, a paragraph appears below the textbox and says "Thank you ______"截至目前，在他们按下提交后，他们停留在同一页面上，一旦按下提交，文本框下方就会出现一个段落，并说“谢谢你______”
I store the value of whatever the user put's in the textbox by setting "var name = document.getElementById("myText").value" If I were to go to a new page, I don't how to transfer the variable "name" to that page.我通过设置“var name = document.getElementById("myText").value”来存储用户在文本框中输入的任何值"到那个页面。
Here is the code for what I was talking about so you can test it and see what I mean.这是我所说的代码，因此您可以对其进行测试并了解我的意思。 I would like there to be a new page that says "Thank you _____" once the submit button is pressed, but I don't know how to transfer the value of the textbox onto a new page.一旦按下提交按钮，我希望有一个新页面显示“谢谢____”，但我不知道如何将文本框的值转移到新页面上。
.container2 > * { vertical-align:top; } textarea { border: 3px solid #FF9333; resize: none; height: 30px; width: 300px; } textarea:focus{ border: 3px solid #E86D00; outline: none; } button { height: 30px; width: 70px; color: #FFFFFF; background-color: #FF7800; border-left: 2px solid #DCDCDC; border-top: 2px solid #DCDCDC; border-bottom: 2px solid #ADADAD; border-right: 2px solid #ADADAD; outline: none; } button:hover { background-color: #E86D00; cursor: pointer; } button:active { text background-color: #FF8315; border-right: 2px solid #DCDCDC; border-bottom: 2px solid #DCDCDC; border-top: 2px solid #ADADAD; border-left: 2px solid #ADADAD; } <body> <div class = "container2"><textarea placeholder = "Enter name here" style = "margin-right: 10" type="textarea" id="myText"></textarea> <button id = "submit" onclick="getName();">Submit</button></div> <p id = "result"></p> <script> var name; function getName() { name = document.getElementById("myText").value; document.getElementById("result").innerHTML = "Thank you, " + name; } </script> </body>
In the code, I store the value submitted by setting the variable "name" to "document.getElementById("myText").value", so if the user was directed to a new page, would "name = document.getElementById("myText").value" still work?在代码中，我通过将变量“name”设置为“document.getElementById(“myText”).value”来存储提交的值，因此如果用户被定向到新页面，则“name = document.getElementById(” myText").value" 仍然有效吗？ I'm confused on how to store the value of the textbox in a variable that could also be used in another page.我对如何将文本框的值存储在一个也可以在另一个页面中使用的变量中感到困惑。 Does it just depend on whether the variable "name" is global or local?它仅取决于变量“名称”是全局的还是局部的？ (All my code is in Notepad++). （我所有的代码都在 Notepad++ 中）。
Note: I am aware that I could collapse the textbox after the Submit button is pressed, by setting the display to none, but my actual code is a bit more complicated, so it would be easier if I could just go to a new page.注意：我知道我可以在按下提交按钮后折叠文本框，通过将显示设置为无，但我的实际代码有点复杂，所以如果我可以只 go 到新页面会更容易。
1 个解决方案
解决方案1
0 2020-06-03 22:31:57
You could pass the name as an URL parameter: www.yoursite.com/?username=Anika您可以将名称作为 URL 参数传递：www.yoursite.com/?username=Anika
And use it in your JS:并在你的 JS 中使用它：
const queryString = window.location.search const urlParams = new URLSearchParams(queryString) const username = urlParams.get('username')
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.