• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How to display results using localStorage

Richie

New Coder
Thanks for viewing the question. I made a program in where a user registers, then if the user leaves an item blank, the whole registration items becomes blank (the user has to restart the whole thing). Otherwise, if the user clicks submit and has every item answered, he will be directed to an another page which shows the results such as:

Name: user
Last Name: user
gender: male
etc...

However, my page does not redirect, even when I used localStorage, furthermore, the registration button does not restart when an item is left blank.

Is there a problem with it? Thanks
JavaScript:
<nav> 
          
        <form id = "signup">
            <fieldset form="signup">
                <legend>Register: </legend>

                <label for="name1">*First Name:</label>
                <input type="text" id="name1" name="name1"  required/><br><br>
                <label for="famname">*Family Name:</label>
                <input type="text" id="famname" name="famname"  required/><br><br>

                <p>*Your Gender:</p>
                <input type="radio" id="male" name="gender" value="Male"  required/>
                <label for="male">Male</label></br>
                <input type="radio" id="female" name="gender" value="Female"  required/>
                <label for="female">Female</label></br>
                <input type="radio" id="prefernotsay" name="gender" value="Prefer not say"  required/>
                <label for="prefernotsay">Prefer Not Say</label>
                
                <br>
                <br>

                <label for="email">*Email:</label>
                <input type="text" id="email" name="email"  required/><br><br>

                <label for="number">Contact Number:</label>
                <input type="text" id="number" name="Number"  required/><br><br>

                <label for="passWord">*Password: </label>
                <input type="password" id="passWord" name="passWord" required/>
                
                <br>
                <br>

                <label for="comments">*Why do you want to register: </label></br>
                <textarea id="tArea" name="comments" rows="4" cols="50"> </textarea>
                
                <br>
                <br>               

                <input type="submit" value="Submit">
                <input type="reset" value="Clear">

            </fieldset>
        </form>

    
      </nav>
    <div id="result"></div>



  <script>           
    
        var nm1 = $("#name1").val();
        var nm2 = $("#famname").val();
            var ps1 = $("#passWord").val();
        var email = $("#email").val();
        var comment = $("#tArea").val();

        $(function() {
          $("#signup").on("submit", function(e) {

            const data = {}
            $("[required]").each(function() {
              data[name1] = " ";
            });
            localStorage.setItem("n1", nm1);
            localStorage.setItem("n2", nm2);
                      localStorage.setItem("p1", ps1);
              localStorage.setItem("e1", email);
            slocalStorage.setItem("c1", comment);
          });
        });
        const data = var storedName1 = localStorage.getItem("n1");
        const data = var storedName2 = localStorage.getItem("n2");
        const data = var storedPass = localStorage.getItem("p1");
        const data = var storedEmail = localStorage.getItem("e1");
        const data = var storedComment = localStorage.getItem("c1");

        
            
  </script>
</body>

</html>
 

Johna

Frontend Web Developer
Staff Team
Guardian
You cannot make all your radio buttons required, because that means whoever is registering will have to be both male and female XD. You can instead make one of them already selected so the user can only deselect that by selecting another one.

Anyway my battery is almost dead, so I'll get back to you tomorrow and try to help you.
 
Top