I have tables that have hundreds of rows displayed per page, and each row has inputs that can be changed by the user. I want to send only the updated data to the backend so that not too much data will be sent. There is a “save changes” button at the top.
I am not using a form element currently (So to not send the entire table)
What I do is, I give each <tr> the row id from the database as a dataset attribute, and listen to changes on inputs, then if one of the values of a row is changed, I add this entire row and its inputs to an object that holds all the changed rows. This object is then sent to the backend
let updatedData = {};
let table1Form = document.querySelector('#table_1');
table1Form.addEventListener("change", (event) => {
let row = event.target.closest('tr');
let rowId = row.dataset.dbRowId;
let rowInputs = row.querySelectorAll('input');
updatedData[rowId] = {};
rowInputs.forEach((input) => {
if (input.type === "checkbox") {
updatedData[rowId][input.name] = input.checked;
} else {
updatedData[rowId][input.name] = input.value;
}
});
});
document.querySelector("#save-changes").addEventListener("click", () => {
console.log(updatedData);
});<button id="save-changes">Save Changes</button>
<table id="table_1">
<tr data-db-row-id="1">
<td><input type="text" name="email" value="[email protected]" /></td>
<td><input type="text" name="name" value="Foo" /></td>
<td><input type="checkbox" name="show" checked="checked" /></td>
</tr>
<tr data-db-row-id="2">
<td><input type="text" name="email" value="[email protected]" /></td>
<td><input type="text" name="name" value="Bar" /></td>
<td><input type="checkbox" name="show" /></td>
</tr>
</table>But it feels cumbersome, and I need to check for each type of input (in the above example I had to have distinction between the checkbox and the text inputs because they are evaluated differently
Perhaps there’s a better way to do that (with the use of Form Data maybe as well?)