CODEWITHSUNDEEP
javascriptjquerylocal-storage
neo5_50
neo5_50

Reputation: 476

Javascript / jQuery with localStorage API not working

I am trying to use the localStorage API to grab an email value when the user submits a form and then populate another form field later.

I tried using vanilla javascript first:

window.onload = function() {

  // Check for LocalStorage support.
  if (localStorage) {

    // Add an event listener for form submissions
    document.getElementById('searchBooking').addEventListener('submit', function() {
      // Get the value of the email field.
      var email = document.getElementById('email').value;

      // Save the email in localStorage.
      localStorage.setItem('email', email);
    });

  }  

  // Retrieve the users email.
   var email = localStorage.getItem('email');

   if (email != "undefined" || email != "null") {
     document.getElementById('guestEmail').innerHTML = email;
   } else {
     document.getElementById('guestEmail').innerHTML = "";
   }

}

But got this error message in the browser console on line 21:

Uncaught TypeError: Cannot set property 'innerHTML' of null

Then I tried with this jQuery:

$(function() {
  // Check for LocalStorage support.
  if (localStorage) {
    // Add an event listener for form submissions
    $('#searchBooking').on('submit', function() {
      // Get the value of the email field.
      var email = $('#email').value;
      // Save the name in localStorage.
      localStorage.setItem('#email', email);
  });
  }

  var email = localStorage.getItem('#email');
  if (email != "undefined" || email != "null") {
    $('#guestEmail').html = email;
  }
   else {
    $('#guestEmail').html = "";
    }
});

I didn't get an error message but nothing worked.

Sorry, I am very new to Javascript and don't use it very often, but I really need to save this value and repopulate it in another form.

Upvotes: 2

Views: 1069

Answers (1)

Sushil
Sushil

Reputation: 2835

after looking at your gist link, I found that guestEmail is a textbox on your page so the innerHTML is not going to work here. also the jquery implementation for both .value and .html is not correct.

you need to update your jquery as follows

$(function() {
    // Check for LocalStorage support. 
    if (localStorage) {
        // Add an event listener for form submissions 

        $('form').on('submit', function() {
            // Get the value of the email field. 
            var email = $('#email').val();
            // Save the name in localStorage. 
            localStorage.setItem('#email', email);
            $('#guestEmail').html(email);
            console.log(localStorage.getItem('#email'));
        });
    }

    var emailLocalStorage = localStorage.getItem('#email');
    console.log(emailLocalStorage);

    if (typeof emailLocalStorage != "undefined" && emailLocalStorage != "null") {
        $('#guestEmail').val(emailLocalStorage);
        console.log(emailLocalStorage)
    } else {
        $('#guestEmail').val("");
    }
});

Hope this helps.

Upvotes: 2

Related Questions