Question 197600 in Javascript Question posted in
A very good W3school tutorial can be found here.

I can't catch the value of my input when I load window using JavaScript DOM

I have to save the data from a form in locaStorage when I load the window.
The problem is that when I use the "load" event, I cant catch the value of the input, gives me null. And if I change the "window load" event to the "click" event the button in the form, works fine.

HTML

<form id="contact-form" action="https://formspree.io/f/xbjenldv" method="POST">
     <input id="name" class="input-form" name="name"  type="text" required>
     <button id="submit" type="submit">Get in touch</button>
 </form>

JS

window.onload = () => {
 const name = document.querySelector('#name').value;
 localStorage.setItem('formInfo', JSON.stringify(name));
 const showInfo = JSON.parse(localStorage.getItem('formInfo'));
 console.log(showInfo);
 };

I write ‘Bianca’ in the input, and when I load the windowname is empty. I need that name value be ‘Bianca’.

Tags:

2

Answers


  1. 0

    I did an example of similar code in action:

    window.onload = () => {
 const name = document.querySelector('#name').value;
 const showInfo = JSON.parse(localStorage.getItem('formInfo'));
 console.log("info: ", showInfo);
};

function setName(){
  const name = document.querySelector('#name').value;
  localStorage.setItem('formInfo', JSON.stringify(name));
}
    <input id="name" class="input-form" name="name"  type="text" required>
<button onClick="setName()">Get in touch</button>

    I believe the issue lies in your form or another function not properly updating the value in local storage. As demonstrated in the example, please attempt to invoke a function that will update the input value accordingly.

    Login or Signup to reply.
  2. 0

    Let’s read what your code is doing out loud.

    1. Onload we run this code
    2. We read the value of the input which is a value at that moment in time and will not update.
    3. We store the value (which is an empty string) into local storage.
    4. We read localstorage and parse it as JSON. So we get our empty string back out.
    5. we display the empty string.

    No where in your code do you read the text that the user enters after the inputed it. The value is just the initial starting value. The variable does not magically update with the new value.

    You want to get the value when the user submits the form.

    <form id="contact-form" action="https://formspree.io/f/xbjenldv" method="POST">
  <input id="name" class="input-form" name="name"  type="text" required>
  <button id="submit" type="submit">Get in touch</button>
</form>

    window.addEventListener("load", () => {
  const form = document.querySelector("#contact-form");

  form.addEventListener("submit", () => {
    const name = document.querySelector('#name').value;
    localStorage.setItem('formInfo', JSON.stringify(name));
  });
 
  const showInfo = JSON.parse(localStorage.getItem('formInfo'));
  console.log(showInfo);
});

    or you want to get the value when the user inputs the text or changes it.

      const input = document.querySelector("#name");

  input.addEventListener("input", () => {
    const name = input.value;
    localStorage.setItem('formInfo', JSON.stringify(name));
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search