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
– conor177, Commented Apr 6, 2021 at 14:58
for using href and onclick within <a> tag: stackoverflow.com/questions/1346043/… — Jswq
– Jswq, Commented Apr 6, 2021 at 15:00

Rashed Rahat · Accepted Answer · 2021-04-06 15:14:49Z

1

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

answered Apr 6, 2021 at 15:14

Rashed Rahat

2,5152 gold badges25 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nibia · Accepted Answer · 2021-04-06 15:00:28Z

0

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

answered Apr 6, 2021 at 15:00

Nibia

3241 silver badge7 bronze badges

Comments

Mohammad Salim Hosen · Accepted Answer · 2021-04-06 15:14:04Z

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 6, 2021 at 15:14

Mohammad Salim Hosen

3132 silver badges12 bronze badges

Collectives™ on Stack Overflow

Getting HTML form data with JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related