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>

Sorry is that how you use it in the code i've updated it above and still doesn't seem to work — conor177, Apr 06 '21 at 14:58
for using href and onclick within tag: https://stackoverflow.com/questions/1346043/html-anchor-link-href-and-onclick-both — Jswq, Apr 06 '21 at 15:00

score 1 · Accepted Answer · answered Apr 06 '21 at 15:14

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

score 0 · Answer 2 · answered Apr 06 '21 at 15:00

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);
  }

score 0 · Answer 3 · answered Apr 06 '21 at 15:14

0

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'

answered Apr 06 '21 at 15:14

Mohammad Salim Hosen

183
1
11

Getting HTML form data with JavaScript

3 Answers3