I’m trying to create a webpage where a user asked their name(textbox) and gender(radio buttons) on the front page. This will then link to a new page will be dependent on whether they chose if they are male or female, it will also need to display their name as entered in the text box.
So far I have the name part working using javascript this is on the front page with the form action directed to a new page:
// Called on form's `onsubmit`
function tosubmit() {
// Getting the value of your text input
var mytext = document.getElementById("mytext").value;
// Storing the value above into localStorage
localStorage.setItem("mytext", mytext);
return true;
}
and this is on the other page:
// Called on body's `onload` event
function init() {
// Retrieving the text input's value which was stored into localStorage
var mytext = localStorage.getItem("mytext");
// Writing the value in the document
document.getElementById("name").innerHTML = mytext;
}
The HTML form I am currently using is:
<input id="mytext" type="text" name="data" placeholder="Enter name" maxlength="12">
Male: <input type="radio" name="gender" value="male" /><br />
Female: <input type="radio" name="gender" value="female" /><br />
<input id="name-submit" type="submit" value="">
</form>
The main problem here is that this always directs to the same page. Can anyone tell me how I could solve this problem and add in the option for a user to choose their gender and the next page would be dependant on this choice?
Many Thanks