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">
