How do I save HTML form field values to localStorage using JavaScript?

Question

I need to get data from an HTML form and store them at localStore, but I'm running into some problems while attempting to tho this.

Let's make a short example:

<form class="w3-container" id="form"> 
<p><label>Name</label><input class="w3input" type="text" id="name"></p>
<p><label>Adress</label><input class="w3-input" type="text" id="adress"></p>
<p><label>Number</label><input class="w3-input" type="text" id="number"></p>
<button class="w3-button w3-blue">Submit</button>
</form>

Then JavaScript code:

localStorage.setItem("name", document.getElementById("name").value);
localStorage.setItem("adress", document.getElementById("adress").value);
localStorage.setItem("number", document.getElementById("number").value);

I have tried a different number of ways to do this but nothing seems to work. What am I missing?

Code seems incomplete. If you are storing the data in localStorage, you need to have `onclick` attribute on the Submit button. — coderpc, Jan 19 '19 at 02:18

score 1 · Answer 1 · answered Jan 19 '19 at 02:21

1

If you're trying to store the data in localStorage when Submit button is clicked, your code should be as follows.

function onSubmit() {
  localStorage.setItem("name", document.getElementById("name").value);
  localStorage.setItem("adress", document.getElementById("adress").value);
  localStorage.setItem("number", document.getElementById("number").value);
}

<form class="w3-container" id="form">
  <p><label>Name</label><input class="w3input" type="text" id="name"></p>
  <p><label>Adress</label><input class="w3-input" type="text" id="adress"></p>
  <p><label>Number</label><input class="w3-input" type="text" id="number"></p>
  <button class="w3-button w3-blue" onclick="onSubmit()">Submit</button>
</form>

answered Jan 19 '19 at 02:21

coderpc

4,119
6
51
93

I believe you should avoid using inline javascript (unless you're using a framework e.g react). you should bind the form element to a variable in an external javascript file (or within script tags) then, listen for the submit event on the form element, then grab and save the values you want. – Oguntoye Jan 19 '19 at 02:41
1

Glad for the knowledge share. I've seen this [post](https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) which was posted as an answer from other user, better explains the difference between usage of `onclick` and `addEventListener`. @Oguntoye – coderpc Jan 19 '19 at 17:31

score 1 · Answer 2 · answered Jan 19 '19 at 02:57

Within <script></script> tags or an external js file,

Get the form element: const form = document.getElementById('form');

Add a listener to listen for the submit event and save your values:

form.addEventListener('submit', () => {
  localStorage.setItem("name", document.getElementById("name").value);
  localStorage.setItem("adress", document.getElementById("adress").value);
  localStorage.setItem("number", document.getElementById("number").value);
})

You should avoid using inline javascript (unless you're using a framework e.g react (then it's not even really inline)).

score 0 · Answer 3 · answered Jan 19 '19 at 02:30

0

Alternatively you could add an Event Listener.
addEventListener vs onclick

answered Jan 19 '19 at 02:30

How do I save HTML form field values to localStorage using JavaScript?

3 Answers3