How can I go to a new page after a form is submitted, and have the new page display processed information from the form?
Question
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.
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? 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++).
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.
1 answers
solution1
0 2020-06-03 22:31:57
You could pass the name as an URL parameter: www.yoursite.com/?username=Anika
And use it in your JS:
const queryString = window.location.search const urlParams = new URLSearchParams(queryString) const username = urlParams.get('username')
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.