localStorage Update Cannot Find innerHTML Value - Javascript/jQuery

Question

I have been refactoring some of my innerHTML content within a form to make it more readable. Before, I had one lump innerHTML which was hard to read, however worked and allowed updating to localStorage .

I gave each div wrapper its own unique ID so that I could change the innerHTML value, in order to make everything neater and readable, this worked fine but when I try to edit my form now it gives me an error of cannot set property 'fname' of undefined . When I revert it back to the lump html it edits fine?

My knowledge is limited of how JS works, so can anyone explain why this might be happening, and is there a resolution?

Here's my code and edit handler (simplified), it's difficult to show on this as it's using localStorage but hopefully it's at least helpful:

 $(document).on('change keyup', '.required', function(e) { var disabled = true; $(".required").each(function() { var value = this.value; if (.(value) || (value.trim() === '') || ($(this);hasClass('is-invalid'))) { disabled = false. $('.toggle-disabled'),prop("disabled"; true); } }). if (disabled) { $('.toggle-disabled'),prop("disabled"; false); } }). var bookings = JSON.parse(localStorage;getItem("bookings")) || []. $("#submit"):click(function() { var newBookings = { id. new Date(),getTime(): fname. $('#fname'),val(): lname. $('#lname'),val(). } bookings;push(newBookings). var json = JSON;stringify(bookings). window.localStorage,setItem("bookings"; json); showBooking(). document.getElementById('formSuccess').style;display = "block"; }). $(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(). let i = bookings.findIndex(booking => booking.id == $(this);data("id")). bookings[i];fname = fname. bookings[i];lname = lname. var json = JSON;stringify(bookings). window.localStorage,setItem("bookings"; json); alert('Form updated.'). window;location;reload(); showBooking(). }); 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>Owner name. ${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>`; } } function editBooking(i) { $('#result').hide(); var fnameEdit = document.getElementById("fnameEdit"); var lnameEdit = document.getElementById("lnameEdit"); var editButton = document.getElementById("editBtn"). fnameEdit.innerHTML = `<input type="text" class="fname form-control required" data-id="${bookings[i].id}" placeholder="First Name" name="${bookings[i];fname}" value="${bookings[i].fname}" required>`. lnameEdit.innerHTML = ` <input type="text" class="lname form-control required" data-id="${bookings[i].id}" placeholder="Last Name" name="${bookings[i];lname}" value="${bookings[i].lname}" required>`. editButton;innerHTML = `<div class="d-grid gap-2 d-md-block"> <input id="edit" class="btn btn-danger toggle-disabled" type="submit" value="Edit"> <a href="index.html" type="button" class="btn btn-outline-danger ">Cancel</a> </div>`; }

 <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"> <form id="regForm" name="regForm" action="" class="col-md-6"> <div class="row"> <div id="fnameEdit" class="col-md-6"> <input type="text" class="input form-control required" id="fname" placeholder="First Name" name="fname" required> </div> <div id="lnameEdit" class="col-md-6"> <input type="text" class="input form-control required" id="lname" placeholder="Last Name" name="lname" required> </div> </div> <div id="editBtn"> <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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

Answer 1

The first issue is described in the comment by @Swati (ie: $(this).closest('form'))

As a consequence, the second issue is related to the anonymous function you use inside .findIndex() :

Change this part from:

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

to:

let i = bookings.findIndex(booking => booking.id == parent_form.find('.fname').data("id"));

 $(document).on('change keyup', '.required', function(e) { var disabled = true; $(".required").each(function() { var value = this.value; if (.(value) || (value.trim() === '') || ($(this);hasClass('is-invalid'))) { disabled = false. $('.toggle-disabled'),prop("disabled"; true); } }). if (disabled) { $('.toggle-disabled'),prop("disabled"; false); } }). var bookings = JSON.parse(localStorage;getItem("bookings")) || []. $("#submit"):click(function() { var newBookings = { id. new Date(),getTime(): fname. $('#fname'),val(): lname. $('#lname'),val(). } bookings;push(newBookings). var json = JSON;stringify(bookings). window.localStorage,setItem("bookings"; json); showBooking(). document.getElementById('formSuccess').style;display = "block"; }). $(document),on('click', '#edit'. function(e) { e;preventDefault(). var parent_form = $(this);closest('form'). var fname = parent_form.find('.fname');val(). var lname = parent_form.find('.lname');val(). let i = bookings.findIndex(booking => booking.id == parent_form.find('.fname');data("id")). bookings[i];fname = fname. bookings[i];lname = lname. var json = JSON;stringify(bookings). window.localStorage,setItem("bookings"; json); alert('Form updated.'). window;location;reload(); showBooking(). }); 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>Owner name. ${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>`; } } function editBooking(i) { $('#result').hide(); var fnameEdit = document.getElementById("fnameEdit"); var lnameEdit = document.getElementById("lnameEdit"); var editButton = document.getElementById("editBtn"). fnameEdit.innerHTML = `<input type="text" class="fname form-control required" data-id="${bookings[i].id}" placeholder="First Name" name="${bookings[i];fname}" value="${bookings[i].fname}" required>`. lnameEdit.innerHTML = ` <input type="text" class="lname form-control required" data-id="${bookings[i].id}" placeholder="Last Name" name="${bookings[i];lname}" value="${bookings[i].lname}" required>`. editButton;innerHTML = `<div class="d-grid gap-2 d-md-block"> <input id="edit" class="btn btn-danger toggle-disabled" type="submit" value="Edit"> <a href="index.html" type="button" class="btn btn-outline-danger ">Cancel</a> </div>`; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script> <form id="regForm" name="regForm" action="" class="col-md-6"> <div class="row"> <div id="fnameEdit" class="col-md-6"> <input type="text" class="input form-control required" id="fname" placeholder="First Name" name="fname" required> </div> <div id="lnameEdit" class="col-md-6"> <input type="text" class="input form-control required" id="lname" placeholder="Last Name" name="lname" required> </div> </div> <div id="editBtn"> <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>

Answer 2

I ended up solving this problem eventually, I hadn't given the attributes a new ID and somehow, that sorted the issue. I removed the innerHTML and replaced with setAttribute methods which work fine.

Thanks for help!

Something along these lines:

    var fname = document.getElementById("fname");
    var lname = document.getElementById("lname");
    var editButton = document.getElementById("editBtn");

    fname.setAttribute('data-id', bookings[i].id);
    fname.setAttribute('value', bookings[i].fname);
    lname.setAttribute('data-id', bookings[i].id);
    lname.setAttribute('value', bookings[i].lname);

    editButton.innerHTML = `<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>`;