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

Please [edit] your question and add your code there, don't put it in a comment. — nnnnnn, Jan 18 '16 at 04:58
How to submit forms is well documented and easy to research. You should really do that basic learning first. Also please read http://stackoverflow.com/help/how-to-ask — charlietfl, Jan 18 '16 at 04:58
I would think that local storage would be the easiest solution here — lucas, Jan 18 '16 at 05:00
@lucas that's just a guess since use case hasn't been defined — charlietfl, Jan 18 '16 at 05:01
@charlietfl I disagree - I think it's blindingly obvious what OP is trying to do and making them jump through alll sorts of hoops to get to the same one-line answer is what turns people away from SO in droves. k manohar is more than welcome to try local storage and post back if it isn't appropriate. Sure it's a guess but I suspect you would agree a decent one, given the info given and better than other red herrings like asking for the html to be added to the question or using query strings for crying out loud. Please note the question is not about form submission but rather data persistence — lucas, Jan 18 '16 at 05:15
@lucas agree it is about data persistence and feel free to offer that as solution. No idea what you mean by `one liner answer` ... I don't see any answers ...or research effort put in by OP which is expected. By the same token people should think asking on SO should supersede a google search — charlietfl, Jan 18 '16 at 05:18
@charlietfl I don't know if you remember being a noobie coder and not only not knowing how to do something but not even having the vocabulary to know what to search for, but it's a pretty frustrating stage for anyone who learns independently as opposed to an academic environment where everything gets served up in a structured way. If OP is genuine, they're off googling local storage as we speak. If not, they'll be posting an even lamer question soon. Either way, my SO philosophy is to offer hints as comments for vague questions and solutions as answers to properly structured questions. — lucas, Jan 18 '16 at 05:29
@lucas yes as a matter of fact I do remember since I have zero formal training whatsoever in this field and the resources available in google searches are infinitely better than when I did learn. Anyone learning also needs to learn that research is a major part of programming ... *give a man a fish...or teach him to fish?* — charlietfl, Jan 18 '16 at 05:36
@charlietfl my thoughts exactly. And I think you'll note that user2181397 has just plopped a lovely scaled and cleaned fillet on the table, lightly seared and garnished to perfection. I sometimes wonder what this site would be like if it weren't for the silly points system — lucas, Jan 18 '16 at 05:47

score 1 · Accepted Answer · answered Jan 18 '16 at 05:30

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

score 0 · Answer 2 · edited May 23 '17 at 12:08

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.

Enter Your Name:
Enter Your Age:

How to hold data in text field in html?

2 Answers2