How to retain multiple form values in JavaScript after reloading a web page?

Question

Below is how I tried to retain the form values using JavaScript, but it is not working:

<form action="" method="Post" onload="saveData();">
<Label>1. What is your favourite browser?</Label>
<select id="browserValue">
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Firefox">Firefox</option>
    <option value="Chrome">Chrome</option>
    <option value="Opera">Opera</option>
    <option value="Safari">Safari</option>
</select>
<br>
<br>
<Label>2. What is your favourite food group?</Label>
<select id="foodValue">
    <option value="Meats/Alternatives">Meats/Alternatives</option>
    <option value="Vegetables">Vegetables</option>
    <option value="Dairy Products">Dairy Products</option>
    <option value="Fruits">Fruits</option>
    <option value="Grains">Grains</option>
    <option value="Confections (Junk Food)">Confections (Junk Food)</option>
</select>
<br>
<br>
<Label>3. What is your favourite game genre?</Label>
<select id="gameValue">

    <option value="FPS">First Person Shooter (Ex: Halo, Call of Duty)</option>
    <option value="TPS">Third Person Shooter (Ex: Ghost Recon, Gear of War)</option>
    <option value="Puzzle">Puzzle (Ex: Sudoku, Minesweeper)</option>
    <option value="Sim">Simulation (Ex: Minecraft, SimCity)</option>
    <option value="Other">Other (Please specify the genre)</option>
   </select>

<br>
<br>
<input type="button"  value="Submit">
</form>
<script>
function saveData(){
    var q1 = document.getElementById("browserValue").onChange().value;
    var a = localStorage.setItem("browsers", q1);
    var q2 = document.getElementById("foodValue").onChange().value;
    var b = localStorage.setItem("food", q2); 
    var q3 = document.getElementById("gameValue").onChange().value;
    var c = localStorage.setItem("game", q3);

   }
   document.getElementById("browserValue").value = a;
   document.getElementById("foodValue").value = b;
   document.getElementById("gameValue").value = c;  
</script>

I have never used this before but shouldn't you use document.getElementById("browserValue").value = localStorage.getItem("browsers") to get the value from local storage? Your variable a, b, c will go out of scope when the page is reloaded. — GobSmack, Aug 20 '15 at 12:52
Yes I have done also like as you said but still it is not working @GobSmack — CSiva, Aug 20 '15 at 13:00

score 1 · Accepted Answer · edited May 23 '17 at 11:58

I have created a fiddle and it seems to be working: http://jsfiddle.net/4hsxjhnd/1/

HTML

<form action="" method="Post">
<Label>1. What is your favourite browser?</Label>
<select id="browserValue">
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Firefox">Firefox</option>
    <option value="Chrome">Chrome</option>
    <option value="Opera">Opera</option>
    <option value="Safari">Safari</option>
</select>
<br>
<br>
<Label>2. What is your favourite food group?</Label>
<select id="foodValue">
    <option value="Meats/Alternatives">Meats/Alternatives</option>
    <option value="Vegetables">Vegetables</option>
    <option value="Dairy Products">Dairy Products</option>
    <option value="Fruits">Fruits</option>
    <option value="Grains">Grains</option>
    <option value="Confections (Junk Food)">Confections (Junk Food)</option>
</select>
<br>
<br>
<Label>3. What is your favourite game genre?</Label>
<select id="gameValue">

    <option value="FPS">First Person Shooter (Ex: Halo, Call of Duty)</option>
    <option value="TPS">Third Person Shooter (Ex: Ghost Recon, Gear of War)</option>
    <option value="Puzzle">Puzzle (Ex: Sudoku, Minesweeper)</option>
    <option value="Sim">Simulation (Ex: Minecraft, SimCity)</option>
    <option value="Other">Other (Please specify the genre)</option>
   </select>

<br>
<br>
<input type="button" value="Submit" onclick="savecode()">
<input type="button" value="Reload" onclick="getcode()">
</form>

JS:

//Script
function savecode()
{
  localStorage.setItem("browsers", $("#browserValue").val());
  localStorage.setItem("food", $("#foodValue").val());
  localStorage.setItem("game", $("#gameValue").val());
}

function getcode()
{
    alert(localStorage.getItem("browsers"));
   document.getElementById("browserValue").value = localStorage.getItem("browsers");
   document.getElementById("foodValue").value = localStorage.getItem("food");
   document.getElementById("gameValue").value = localStorage.getItem("game");  
}

A few things I learnt while solving this were that: onload works only with body see here

Also, I read about either wrapping onchange in document ready or attaching an event listener to it to trigger the event properly: event listener, ready event

I have modified the program slightly. If you press the reload, it will fetch the values from local storage instead of the values auto-filling on page refresh which can be easily changed. Also, I am using the submit button instead of onchange.

I hope this helps!

Thank you your answer helped me a lot @GobSmack – CSiva Aug 21 '15 at 01:43 — CSiva, Aug 21 '15 at 01:43
@CSiva Glad I could help :) – GobSmack Aug 21 '15 at 03:47 — GobSmack, Aug 21 '15 at 03:47

How to retain multiple form values in JavaScript after reloading a web page?

1 Answers1