HTML local storage with button click

Question

Trying to store a bunch of text boxes once filled and button clicked to local storage. I've looked around and have only found this which I'm trying except im getting Uncaught ReferenceError: save_data is not defined. Any insight would be appreciated.

<label for="serveri"> Server: </label> <input type='text' name="server" id="saveServer"/> <button onclick="save_data()" type="button" value="Save" id="Save">Save</button>

<script>
function saveData(){ var input = document.getElementById("saveServer"); 
localStorage.setItem("server", input.value);
var storedValue = localStorage.getItem("server"); } </script>

If the above doesnt show my problem heres the full in jsfiddle:http://jsfiddle.net/hhntg/

Answer 1

From my observations. You have the function name as saveData where as you used save_data for the button

Answer 2

Edited your jsfiddle to make things work. You just need to run that function when the button is clicked. Tested and verified working with localstorage through the inspector.

http://jsfiddle.net/hhntg/1/

var save_button = document.getElementById('Save')
save_button.onclick = saveData;

function saveData(){
  var input = document.getElementById("saveServer");
  localStorage.setItem("server", input.value);
  var storedValue = localStorage.getItem("server");
}

The only difference in the code here is that the function you wrote is attached to a click handler on the save element, you were nearly there : )