Getting HTML form data with JavaScript
Question
The code below is a HTML form, what I want to do is get the input from that form save it to session storage and be able to transfer it across pages.
I know how to do this normally but specifically with HTML forms this is not working for me.
So if a user types in Conor for a username I want that username to be saved to session storage so I could get that username and use it on another page
It currently is not getting this input when I try and get it from session storage and it does nothing.
So if anyone could explain to me what I am doing wrong with getting this form input and a fix that would be great.
Will answer questions quickly if needed
<html>
<head>
<script type=text/javascript>
function send(){
var name = document.getElementById('Name').value ;
var Fname = document.getElementById('Fname').value;
sessionStorage.setItem('Name',name);
sessionStorage.setItem('fName',Fname);
return true;
}
</script>
</head>
<body>
<div class="wrapper">
<h1>Game Options</h1>
<div class="top">
<label id='Name'>What's your name?</label>
<input type="text" id="Name" placeholder="Please enter a user name" name="name" /><br />
<div class="content content1">
<i></i>
<p class="W">Usernames must contain uppercase letters</p>
</div>
</div>
<div class="top">
<label id="fName">What's your friend's name?</label>
<input type="text" id="fName" placeholder="Please enter a user name" name="name" /><br />
<div class="content content2">
<i></i>
<p class="W">Usernames must contain uppercase letters</p>
</div>
</div>
<div class="top">
<label for="mode">What's your favourite drink?</label>
<select id="Mode">
<option>Please select game difficulty</option>
<option value="simple">Simple</option>
<option value="Common">Common</option>
<option value="Difficult">Difficult</option>
</select>
</div>
<a href="check.html" onclick=" return send();">Begin</a>
</div>
</body>
</html>
3 answers
solution1
2 ACCPTED 2021-04-06 15:14:49
Have a look closely into your code. You have multiple times with the same name id Name & fName . In addition there is also many issues in your code.
Difference Between Class and ID: A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:
Here is the updated code:
Visit to see live demo: Codepen
solution2
0 2021-04-06 15:00:28
I did not fully understand your question, but surely there is an error in the code, which could be your problem:
function send(){
var name = document.getElementById('Name') ;
var Fname = document.getElementById('Fname');
/* U are setting HTMLElement into sessionStorage */
sessionStorage.setItem('Name',name);
sessionStorage.setItem('fName',Fname);
}
U need to do this:
function send(){
var name = document.getElementById('Name').value ;
var Fname = document.getElementById('Fname').value;
sessionStorage.setItem('Name',name);
sessionStorage.setItem('fName',Fname);
}
solution3
0 2021-04-06 15:14:04
You should remove id from your label Tags and There is another error in this line var Fname = document.getElementById('Fname').value;
inside quotation there should be 'fName'
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.