Thanks for viewing my question. I am programming a register form in where information from user is typed, then the information (results) is displayed in an another page using localStorage. the twists are:

If one of the items in the register form is incomplete / no input, the entire register form gets erased (the user has to restart the process) when the submit button is clicked.

The results from the register form will be displayed as follows:

First name: User
Last name: User

(etc...)

The problem is that I have no idea how to display them using localStorage. Furthermore, the register button does not restart when I leave information blank.

Is there any way to fix it? Thanks

Code:

$(document).ready(function() {
  $("#signup").submit(function() {
    var nm1 = $("#name1").val();
    var nm2 = $("#famname").val();
    var ps1 = $("#passWord").val();
    var email = $("#email").val();
    var comment = $("#tArea").val();
    localStorage.setItem("n1", nm1);
    localStorage.setItem("n2", nm2);
    localStorage.setItem("p1", ps1);
    localStorage.setItem("e1", email);
    localStorage.setItem("c1", comment);

    var storedName1 = localStorage.getItem("n1");
    var storedName2 = localStorage.getItem("n2")
    var storedPass = localStorage.getItem("p1");
    var storedEmail = localStorage.getItem("e1");
    var storedComment = localSotrage.getItem("c1");
  });
});

  .myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}

.myDiv:hover {

<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/>

      <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>

CodePudding user response：

1. spelling issue: localSotrage

2. Where is the action? You do not go anywhere. Normally I would expect a

   $("#signup").on("submit",function(e) { 
     e.preventDefault(); /* some AJAX */ 
   

   OR action="nextpage.html" – Add action and HTML5 will not allow the submit when required fields are empty

3. Why are you creating new variables from localStorage and not using them?

This is what I would expect to see IF you have an action on the form (i.e. do not need to stay on the page)

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

    const data = {}
    $("[required]").each(function() {
      data[this.name] = this.value;
    });
    localStorage.setItem("data", JSON.stringify(data))
  });
});

Then in next page you can do

const data = JSON.parse(localStorage.getItem("data"));

and run over the object

CodePudding user response：

Your get values from localStorage after setting into it. But then you didn't get those values because the new value is set but you accessed it right before so it will not point to the new value.

Try to put your get local storage code into setTimeOut.

setTimeOut(() => {
 var storedName1 = localStorage.getItem("n1");
 var storedName2 = localStorage.getItem("n2")
 var storedPass = localStorage.getItem("p1");
 var storedEmail = localStorage.getItem("e1");
 var storedComment = localStorage.getItem("c1");
}, 1000);

It will wait for 1sec and then after you'll get your updated values.