Form Values Returning Null in localStorage When Editing Selects Using Javascript?

Question

I have a form which sends data to localStorage, which I am able to view, delete and edit. My form has a mixture of input types, text select and textarea, when I submit the form, these values store correctly, however when I use my edit function, the values show correctly on the edit form, but if I don't change the values (even to the same value), they update/store as null.

For example: I have a form with Name(type text), Address(type address) and Dog Breed(type select), when I edit, the values of all three will be there from the form before, but if I hit submit without changing any, the dog breed would return null. They update correctly if I change the values, but as this is an appointment scheduler, not every value will be changed (for eg they may only need to change the time or breed).

Here is my snippet - I know it can't be run fully because of sandboxing but just so you can see:

const BREEDS_URL = 'https://dog.ceo/api/breeds/list/all';

const select = document.getElementById('breed');

fetch(BREEDS_URL)
  .then(res => {
    return res.json();
  })
  .then(data => {
    const breedsObject = data.message;
    const breedsArray = Object.keys(breedsObject);
    for (let i = 0; i < breedsArray.length; i++) {
      const option = document.createElement('option');
      option.value = breedsArray[i];
      option.innerText = breedsArray[i];
      select.appendChild(option);
    }
    console.log(breedsArray);
  });

// ~~~ add bookings to localStorage

var bookings = JSON.parse(localStorage.getItem("bookings")) || [];

window.onload = showBooking();
window.onload = showTimes();

$("#submit").click(function() {

  var newBookings = {
    id: new Date().getTime(),
    fname: $('#fname').val(),
    lname: $('#lname').val(),
    email: $('#email').val(),
    number: $('#number').val(),
    sdate: $('#sdate').val(),
    stime: $('#stime').val(),
    duration: $('#duration').val(),
    address: $('#address').val(),
    postcode: $('#postcode').val(),
    dogname: $('#dogName').val(),
    breed: $('#breed').val(),
    info: $('#info').val()
  }

  bookings.push(newBookings);

  var json = JSON.stringify(bookings);
  window.localStorage.setItem("bookings", json);

  alert('Form submitted!');
  showBooking();
});


$(document).on('click', '#edit', function(e) {
  e.preventDefault();

  var parent_form = $(this.form);

  var fname = parent_form.find('.fname').val();
  var lname = parent_form.find('.lname').val();
  var email = parent_form.find('.email').val();
  var number = parent_form.find('.number').val();
  var sdate = parent_form.find('.datepicker').val();
  var stime = parent_form.find('.select').val();
  var duration = parent_form.find('.duration').val();
  var address = parent_form.find('.address').val();
  var postcode = parent_form.find('.postcode').val();
  var dogname = parent_form.find('.dogname').val();
  var breed = parent_form.find('.breed').val();
  var info = parent_form.find('.info').val();

  let i = bookings.findIndex(booking => booking.id == $(this).data("id"));

  bookings[i].fname = fname;
  bookings[i].lname = lname;
  bookings[i].email = email;
  bookings[i].number = number;
  bookings[i].sdate = sdate;
  bookings[i].stime = stime;
  bookings[i].duration = duration;
  bookings[i].address = address;
  bookings[i].postcode = postcode;
  bookings[i].dogname = dogname;
  bookings[i].breed = breed;
  bookings[i].info = info;

  var json = JSON.stringify(bookings);
  window.localStorage.setItem("bookings", json);

  window.location.reload();

  alert('Form updated!');
  showBooking();

});


// ~~~ display bookings in browser

function showBooking() {
  var bookingResult = document.getElementById("result");
  var ul = document.createElement("ul");
  bookingResult.innerHTML = `<h3 class="text-center">Your Bookings</h3>`;
  for (let i = 0; i < bookings.length; i++) {
    bookingResult.innerHTML += `
<div class="card card-body bg-light  m-4"> 
<div class="row">
<p>${bookings[i].fname + " " + bookings[i].lname}</p>
</div>
<div class="row">
<div class="d-grid gap-2 d-md-block">
<button onclick="editBooking(${i})" class="col-md-4 btn btn-outline-danger ">Edit</button>
<button onclick="deleteBooking(${i})" class="col-md-4 btn btn-danger text-light ">Delete</button>
</div>
</div>                          
</div>`;
  }
}

// ~~~ edit bookings in browser

function editBooking(i) {
  $('#result').hide();
  var currentItem = document.getElementById("currentItem");
  var editBooking = document.getElementById("editAppt");

  currentItem.innerHTML += `
<h3 class="text-center">Currently Amending</h3>
<div class="card card-body bg-light  m-4"> 
<p data-id="${bookings[i].id}">${bookings[i].fname + " " + bookings[i].lname}</p>                    
</div>`;

  editBooking.innerHTML = `
<h3 class="text-center">Amend Your Booking</h3>
<div class="row">
<div class="col-md-6">
<input type="text" class="fname form-control required" data-id="${bookings[i].id}" placeholder="First Name" name="${bookings[i].fname}" value="${bookings[i].fname}">
</div>
<div class="col-md-6">
<input type="text" class="lname form-control required" data-id="${bookings[i].id}" placeholder="Last Name" name="${bookings[i].lname}" value="${bookings[i].lname}">
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="email" class="email form-control required" data-id="${bookings[i].id}" placeholder="Email Address" name="${bookings[i].email}" value="${bookings[i].email}">
</div>
<div class="col-md-6">
<input type="number" class="number form-control required" data-id="${bookings[i].id}" onchange="validateContact()" placeholder="Contact Number" name="${bookings[i].number}" value="${bookings[i].number}">
</div>
</div>

<div class="row">
<div class="col-md-6">
<input type="date" id="sdate" class="datepicker form-control required" name="${bookings[i].sdate}" onchange="checkStartDate()" value="${bookings[i].sdate}">
</div>

<div class="col-md-6">
<select id="stime" name="${bookings[i].stime}" onfocus="showTimes()" class="time select form-control required" value="${bookings[i].stime}">${bookings[i].stime}
<option value="${bookings[i].stime}" selected disabled hidden>${bookings[i].stime}</option>
</select>
</div>
</div>

<div class="row">
<div class="col-md-6">
<select name="${bookings[i].duration}" class="duration form-control required" data-id="${bookings[i].id}"  value="${bookings[i].duration}">${bookings[i].duration}
<option value="${bookings[i].duration}" selected disabled hidden>${bookings[i].duration}</option>
<option value="30 mins">30 mins</option>
<option value="1 hour">1 hour</option>
<option value="1.5 hours">1.5 hours</option>
<option value="2 hours">2 hours</option>
</select>
</div>
</div>

<div class="row">
<div class="col-md-6">
<input type="text" data-id="${bookings[i].id}"  class="address form-control required" placeholder="Address" name="${bookings[i].address}" value="${bookings[i].address}">
</div>
<div class="col-md-6">
<input type="text" data-id="${bookings[i].id}"  class="postcode form-control " placeholder="Post Code"  name="${bookings[i].postcode}" value="${bookings[i].postcode}">
</div>
</div>

<div class="row">
<div class="col-md-6">
<input type="text" id="dogName" class="dogname form-control required" placeholder="Dogs Name" name="${bookings[i].dogname}" value="${bookings[i].dogname}">
</div>

<div class="col-md-6">
<select id="breed" class="breed form-control required" name="${bookings[i].breed}" value="${bookings[i].breed}">
<option value="${bookings[i].breed}" selected disabled hidden>${bookings[i].breed}</option>
</select>
</div>
</div>

<div class="row">
<div class="col-md-12">
<textarea id="info" name="info" class="info form-control required" placeholder="Any additional info - favourite toys or places?" name="${bookings[i].info}">${bookings[i].info}</textarea>
</div>
</div>

<div class="d-grid gap-2 d-md-block">
<input data-id="${bookings[i].id}" id="edit" class="btn btn-danger toggle-disabled" type="submit" value="Edit" disabled>
<a href="index.html" type="button" class="btn btn-outline-danger ">Cancel</a>
</div>

`;

}

function showTimes() {
  let startTime = document.getElementById('stime');

  let times = ['9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00'];

  let options = times.map(time => `<option value="${time}">${time}</option>`).join('');

  startTime.innerHTML += options;
}

// ~~~ delete bookings from localStorage

function deleteBooking(i) {
  alert('Are you sure you want to delete this booking?');
  bookings.splice(i, 1);
  localStorage.setItem("bookings", JSON.stringify(bookings));

  showBooking();
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

<section class="form row">
  <form id="regForm" name="regForm" action="" class="col-md-6">

    <div id="editAppt">
      <div class="row text-center">
        <h3>Book your dog walk now</h3>
        <p>Tell us about yourself first..</p>
      </div>

      <div class="row">
        <div class="col-md-6">
          <input type="text" class="input form-control required" id="fname" placeholder="First Name" name="fname" required>
        </div>
        <div class="col-md-6">
          <input type="text" class="input form-control required" id="lname" placeholder="Last Name" name="lname" required>
        </div>
      </div>

      <div class="row text-center">
        <p>When should we pick your dog up?</p>
      </div>

      <div class="row">
        <div class="col-md-6">
          <input type="date" id="sdate" class="datepicker form-control required" name="sdate" onchange="checkStartDate()" required>
        </div>

        <div class="col-md-6">
          <select name="duration" class="duration form-control required" id="duration" required>
            <option value="" selected disabled hidden>Duration</option>
            <option value="30 mins">30 mins</option>
            <option value="1 hour">1 hour</option>
            <option value="1.5 hours">1.5 hours</option>
            <option value="2 hours">2 hours</option>
          </select>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <input type="text" id="dogName" class="dogname form-control required" placeholder="Dogs Name" name="dogname">
        </div>

        <div class="col-md-6">
          <select id="breed" class="breed form-control required">
            <option value="" selected disabled hidden>Select Breed</option>
          </select>
        </div>
      </div>


      <div class="col-md-6">
        <input id="submit" class="btn btn-danger toggle-disabled" type="submit" value="Submit">
      </div>
    </div>

  </form>

  <div class="col-md-6">
    <div id="result" class="row"></div>
    <div id="currentItem" class="row"></div>
  </div>

Your two lines setting `window.onload` end up making it call `showBooking()` and `showTimes()` immediately and setting the `window.onload` to the result of those calls, which is `undefined`. Read [When do I use parenthesis and when do I not?](https://stackoverflow.com/q/7969088/215552) for more on why that doesn't work. Really, you should use `addEventListener` to add event listeners instead; then you can easily add multiple calls. — Heretic Monkey, Jan 03 '21 at 21:37
Oh okay.. My bookings and times don't appear if I comment them out, and I need them to run the form from the get-go.. Would it be something like this: https://stackoverflow.com/questions/946518/hook-a-javascript-event-to-page-load — Caitlin, Jan 03 '21 at 21:46
You can have only ONE `window.onload` assigned function. As Heretic mentioned above, you are assigning THE RESULT of the function call to it... Which is not a function. And you do it twice. If you want to execute both of these functions when the `load` event fires, I suggest `window.onload = function(){showBooking(); showTimes()}` — Louys Patrice Bessette, Jan 03 '21 at 21:46
Well, you don't need `attachEvent` unless you're supporting IE <9. In which case, tell your employers they will be hacked soon if they haven't already ;). — Heretic Monkey, Jan 03 '21 at 21:50
Thats helpful, thanks, my selects are still returning `null` on edit however. — Caitlin, Jan 03 '21 at 21:50
Sorry, its only for a university project, I am just learning Javascript for a class @HereticMonkey — Caitlin, Jan 03 '21 at 21:51
Your `select`s are problematic because you are adding the previously chosen value to the list as `selected disabled hidden`, and then adding in the other options. So if the user had previously selected "1 hour", that option would be selected, disabled, and hidden. Because it's `disabled`, it wouldn't get posted in a form post. You need to add code to each `option` checking if its value is the selected one and if so, set its `selected` attribute, or, after you've set the `innerHTML`, set the `value` of the corresponding `select` to the value from localStorage. — Heretic Monkey, Jan 03 '21 at 22:02
Oh duh! Yeah I removed the `selected disabled hidden` and hey presto, updates fine.. silly me. I knew it would be something stupid. Thanks for the tips on `window.onload` too! — Caitlin, Jan 03 '21 at 22:12
Nice catch @HereticMonkey ;) You should post an answer. I will delete mine. — Louys Patrice Bessette, Jan 03 '21 at 22:20

Heretic Monkey · Answer 1 · 2021-01-03T22:50:38.793

There are a few issues in the code you'll need to take care of:

First thing is, I'd wrap everything in a "document.ready" event handler from jQuery:
```
$(function() {
...
});
```
The above is shorthand and just ensures your code runs once all of the HTML code has been parsed.

Now, the caveat with that is now all of your functions are no longer in the global scope, so you can't reference them in HTML attributes like onclick. So, you'll need to attach them to your elements using jQuery or plain old DOM methods.
You had two lines which set the window.onload property. In the code below I've changed it to use jQuery-style event handler attachment.
You were setting the name attribute of the form elements to the value of edited appointment, but the name attribute really shouldn't need to change that often.

$(function() {
      const BREEDS_URL = 'https://dog.ceo/api/breeds/list/all';

      function loadBreeds() {
        const select = document.getElementById('breed');

        fetch(BREEDS_URL)
          .then(res => {
            return res.json();
          })
          .then(data => {
            const breedsObject = data.message;
            const breedsArray = Object.keys(breedsObject);
            for (let i = 0; i < breedsArray.length; i++) {
              const option = document.createElement('option');
              option.value = breedsArray[i];
              option.innerText = breedsArray[i];
              select.appendChild(option);
            }
            console.log(breedsArray);
          });
      }
      // ~~~ add bookings to localStorage

      var bookings = JSON.parse(localStorage.getItem("bookings")) || [];

      $(window).on('load', function() {
        showBooking();
        showTimes();
        loadBreeds();
      });

      $("#submit").click(function() {

        var newBookings = {
          id: new Date().getTime(),
          fname: $('#fname').val(),
          lname: $('#lname').val(),
          email: $('#email').val(),
          number: $('#number').val(),
          sdate: $('#sdate').val(),
          stime: $('#stime').val(),
          duration: $('#duration').val(),
          address: $('#address').val(),
          postcode: $('#postcode').val(),
          dogname: $('#dogName').val(),
          breed: $('#breed').val(),
          info: $('#info').val()
        }

        bookings.push(newBookings);

        var json = JSON.stringify(bookings);
        window.localStorage.setItem("bookings", json);

        alert('Form submitted!');
        showBooking();
      });


      $(document).on('click', '#edit', function(e) {
        e.preventDefault();

        var parent_form = $(this.form);

        var fname = parent_form.find('.fname').val();
        var lname = parent_form.find('.lname').val();
        var email = parent_form.find('.email').val();
        var number = parent_form.find('.number').val();
        var sdate = parent_form.find('.datepicker').val();
        var stime = parent_form.find('.select').val();
        var duration = parent_form.find('.duration').val();
        var address = parent_form.find('.address').val();
        var postcode = parent_form.find('.postcode').val();
        var dogname = parent_form.find('.dogname').val();
        var breed = parent_form.find('.breed').val();
        var info = parent_form.find('.info').val();
        let i = bookings.findIndex(booking => booking.id == $(this).data("id"));

        bookings[i].fname = fname;
        bookings[i].lname = lname;
        bookings[i].email = email;
        bookings[i].number = number;
        bookings[i].sdate = sdate;
        bookings[i].stime = stime;
        bookings[i].duration = duration;
        bookings[i].address = address;
        bookings[i].postcode = postcode;
        bookings[i].dogname = dogname;
        bookings[i].breed = breed;
        bookings[i].info = info;

        var json = JSON.stringify(bookings);
        window.localStorage.setItem("bookings", json);

        window.location.reload();

        alert('Form updated!');
        showBooking();

      });

      $(document).on('change', '.datepicker', checkStartDate);
      $(document).on('change', '.number', validateContact);
      $(document).on('focusin', '.time', showTimes);
      $(document).on('click', '.edit-booking', function(e) {
        var index = +$(this).data('index');
        editBooking(index);
      });
      $(document).on('click', '.delete-booking', function(e) {
        var index = +$(this).data('index');
        deleteBooking(index);
      });


      // ~~~ display bookings in browser

      function showBooking() {
        var bookingResult = document.getElementById("result");
        var ul = document.createElement("ul");
        bookingResult.innerHTML = `<h3 class="text-center">Your Bookings</h3>`;
        for (let i = 0; i < bookings.length; i++) {
          bookingResult.innerHTML += `
<div class="card card-body bg-light  m-4"> 
<div class="row">
<p>${bookings[i].fname + " " + bookings[i].lname}</p>
</div>
<div class="row">
<div class="d-grid gap-2 d-md-block">
<button data-index="${i}" class="edit-booking col-md-4 btn btn-outline-danger ">Edit</button>
<button data-index="${i}" class="delete-booking col-md-4 btn btn-danger text-light ">Delete</button>
</div>
</div>                          
</div>`;
        }
      }

      // ~~~ edit bookings in browser

      function editBooking(i) {
        $('#result').hide();
        var currentItem = document.getElementById("currentItem");
        var editBooking = document.getElementById("editAppt");

        currentItem.innerHTML += `
<h3 class="text-center">Currently Amending</h3>
<div class="card card-body bg-light  m-4"> 
<p data-id="${bookings[i].id}">${bookings[i].fname + " " + bookings[i].lname}</p>                    
</div>`;

        editBooking.innerHTML = `
<h3 class="text-center">Amend Your Booking</h3>
<div class="row">
<div class="col-md-6">
<input type="text" class="fname form-control required" data-id="${bookings[i].id}" placeholder="First Name" name="fname" value="${bookings[i].fname}">
</div>
<div class="col-md-6">
<input type="text" class="lname form-control required" data-id="${bookings[i].id}" placeholder="Last Name" name="lname" value="${bookings[i].lname}">
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="email" class="email form-control required" data-id="${bookings[i].id}" placeholder="Email Address" name="email" value="${bookings[i].email}">
</div>
<div class="col-md-6">
<input type="number" class="number form-control required" data-id="${bookings[i].id}" placeholder="Contact Number" name="number" value="${bookings[i].number}">
</div>
</div>

<div class="row">
<div class="col-md-6">
<input type="date" id="sdate" class="datepicker form-control required" name="sdate" value="${bookings[i].sdate}">
</div>

<div class="col-md-6">
<select id="stime" name="stime" class="time select form-control required" value="${bookings[i].stime}">
<option value="${bookings[i].stime}">${bookings[i].stime}</option>
</select>
</div>
</div>

<div class="row">
<div class="col-md-6">
<select name="duration" class="duration form-control required" data-id="${bookings[i].id}"  value="${bookings[i].duration}">
<option value="${bookings[i].duration}">${bookings[i].duration}</option>
<option value="30 mins">30 mins</option>
<option value="1 hour">1 hour</option>
<option value="1.5 hours">1.5 hours</option>
<option value="2 hours">2 hours</option>
</select>
</div>
</div>

<div class="row">
<div class="col-md-6">
<input type="text" data-id="${bookings[i].id}"  class="address form-control required" placeholder="Address" name="address" value="${bookings[i].address}">
</div>
<div class="col-md-6">
<input type="text" data-id="${bookings[i].id}"  class="postcode form-control " placeholder="Post Code"  name="postcode" value="${bookings[i].postcode}">
</div>
</div>

<div class="row">
<div class="col-md-6">
<input type="text" id="dogName" class="dogname form-control required" placeholder="Dogs Name" name="dogname" value="${bookings[i].dogname}">
</div>

<div class="col-md-6">
<select id="breed" class="breed form-control required" name="breed" value="${bookings[i].breed}">
<option value="${bookings[i].breed}">${bookings[i].breed}</option>
</select>
</div>
</div>

<div class="row">
<div class="col-md-12">
<textarea id="info" name="info" class="info form-control required" placeholder="Any additional info - favourite toys or places?" name="info">${bookings[i].info}</textarea>
</div>
</div>

<div class="d-grid gap-2 d-md-block">
<input data-id="${bookings[i].id}" id="edit" class="btn btn-danger toggle-disabled" type="submit" value="Edit" disabled>
<a href="index.html" type="button" class="btn btn-outline-danger ">Cancel</a>
</div>

`;
        loadBreeds();

      }

      function showTimes() {
        let startTime = document.getElementById('stime');

        let times = ['9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00'];

        let options = times.map(time => `<option value="${time}">${time}</option>`).join('');

        startTime.innerHTML += options;
      }

      // ~~~ delete bookings from localStorage

      function deleteBooking(i) {
        alert('Are you sure you want to delete this booking?');
        bookings.splice(i, 1);
        localStorage.setItem("bookings", JSON.stringify(bookings));

        showBooking();
      }

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

<section class="form row">
  <form id="regForm" name="regForm" action="" class="col-md-6">

    <div id="editAppt">
      <div class="row text-center">
        <h3>Book your dog walk now</h3>
        <p>Tell us about yourself first..</p>
      </div>

      <div class="row">
        <div class="col-md-6">
          <input type="text" class="input form-control required" id="fname" placeholder="First Name" name="fname" required>
        </div>
        <div class="col-md-6">
          <input type="text" class="input form-control required" id="lname" placeholder="Last Name" name="lname" required>
        </div>
      </div>

      <div class="row text-center">
        <p>When should we pick your dog up?</p>
      </div>

      <div class="row">
        <div class="col-md-6">
          <input type="date" id="sdate" class="datepicker form-control required" name="sdate" required>
        </div>

        <div class="col-md-6">
          <select name="duration" class="duration form-control required" id="duration" required>
            <option value="" selected disabled hidden>Duration</option>
            <option value="30 mins">30 mins</option>
            <option value="1 hour">1 hour</option>
            <option value="1.5 hours">1.5 hours</option>
            <option value="2 hours">2 hours</option>
          </select>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <input type="text" id="dogName" class="dogname form-control required" placeholder="Dogs Name" name="dogname">
        </div>

        <div class="col-md-6">
          <select id="breed" class="breed form-control required">
            <option value="" selected disabled hidden>Select Breed</option>
          </select>
        </div>
      </div>


      <div class="col-md-6">
        <input id="submit" class="btn btn-danger toggle-disabled" type="submit" value="Submit">
      </div>
    </div>

  </form>

  <div class="col-md-6">
    <div id="result" class="row"></div>
    <div id="currentItem" class="row"></div>
  </div>

If you're talking about the snippet, it doesn't work with localStorage... — Heretic Monkey, Jan 03 '21 at 22:51
I've forked your CodePen and it seems to work: https://codepen.io/heretic-monkey/pen/PoGRBXz — Heretic Monkey, Jan 03 '21 at 23:01
Yes! That works! Should I be doing the encapsulation still anyway? Is that good practice? — Caitlin, Jan 03 '21 at 23:05
Seems like @HereticMonkey made some magic! lol. Anyway, he had pointed out some issues before me on that one. So I do what I said, which is to delete my answer. But about the long `innerHTML` strings to append... Look for my [other today's answer](https://stackoverflow.com/questions/65547891/div-delete-after-button-click-isnt-working-properly-also-not-maintaining-seque/65553972#65553972) anyway. That will save you a lot problems. — Louys Patrice Bessette, Jan 03 '21 at 23:11

Form Values Returning Null in localStorage When Editing Selects Using Javascript?

1 Answers1