CODEWITHSUNDEEP
javascripthtmlforms
Gustavo Metzler Pontes
Gustavo Metzler Pontes

Reputation: 1

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

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?

Upvotes: 0

Views: 1087

Answers (3)

Oguntoye
Oguntoye

Reputation: 685

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

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

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

Upvotes: 1

user7069368
user7069368

Reputation:

Alternatively you could add an Event Listener.
addEventListener vs onclick

Upvotes: 0

krsna
krsna

Reputation: 4333

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>

Upvotes: 1

Related Questions