How to hold data in text field in html?

Question

I have created two html pages. One page having name and age text fields and second page having mother name and father name. Whenever i click on next button in first page that goes to second page then if i click on previous button in second page that comes to first page but data is not shown.so i want that data in that fields.

I want to see data inside field before what i entered...

Answer 1

You can use localStorage to store value and retrieve it.

HTML

<form name="frm1" method="post"> 
  <table> 
   <tr><td>Enter Your Name:</td>
   <td><input type="text" id="name" name="name"></td></tr> 
                          ^^ id attribute added
   <tr><td>Enter Your Age:</td>
   <td><input type="text" id ="age" name="age"></td></tr> 
                          ^^ id attribute added  
   <tr>
   <td></td>
   <td>
     <a href="page2.html">
     <input type="button" id ="nextButton" value="Next">
                          ^^ id attribute added
    </a></td> 
  </table>
 </form>

JS

// Check if local storage has previously stored value
// If there are values then populate relevent field with value.
document.addEventListener("DOMContentLoaded", function(event) {
var getStoredName = localStorage.name;
var getStoredAge = localStorage.age;
console.log(getStoredName ,getStoredAge);
      if(getStoredName !==undefined || getStoredAge !== undefined){
      document.getElementById("name").value=getStoredName;
      document.getElementById("age").value=getStoredAge;
      }

})

// Set local storage on click of next button

var getNextButton = document.getElementById("nextButton");  

getNextButton.addEventListener("click",function(){
    localStorage.name=document.getElementById("name").value;
    localStorage.age=document.getElementById("age").value;
    })

EXAMPLE

Answer 2

Think about your problem:

• Do you need to go to the second page? Can you just put all four of the inputs on the same form? Can you change "page" using Javascript instead of actually navigating to a different page? These would both be good workarounds to your problem.
• Does the data that the user entered need to be there when they go back a page? If the form is submitting it to the server, then it would just be confusing to the user that it's still there and they might submit it twice by mistake.
• Finally, if you really need the data to still be there, you'll have to use persistent data storage such as cookies or localStorage. If you want to learn how to do that, then have a look at this answer which describes the process of using cookies / localStorage and discusses which is the best method.