Detect changed input Values of an HTML input table

Question

Im trying to findout how i can Detect changed Values in the Following prefilled input Table. I get the Data from my MongoDB and use Express-Handlebars and nodejs to fill in the data to the HTML.

<form action="/someaction" method="post">
    <table class="responsive-table-input-matrix">
     <thead>
      <tr>
         <th>name</th>
         <th>some setting</th>
         <th>some setting</th>
         <th>some setting</th>
         <th>some setting</th>
      </tr>
    </thead>
     {{# each values }}
        <tbody>
            <tr>
                <td> {{ this.name}} </td>
                <td><input type="string" style="position: relative;" name="some setting" value={{this.some setting}} autofocus></td>
                <td><input type="string" style="position: relative;" name="some setting" value={{ this.some setting}}></td>
                <td><input type="text" style="position: relative;" value="some setting" value={{ this.some setting}}></td>
                <td><input type="text" style="position: relative;" value="some setting" value={{ this.some setting}}></td>
                <input type="hidden" name="someid" value={{ this.some id}}>
            </tr>
        </tbody>
    {{/each}}
   </table>
          <button type="submit" class="btn btn-success">Submit</button>
</form>

When i click the Submit button the server will recieve An object with all the configs . Which i then want to write back to the MongoDB. But I dont want to write unchanged Values back to it. I could iterate over the Object but as the Rows are basically unlimited that could lead to Server perfomance problems.

I wanted to know if there is away to detect if a value has changed in that specific row and mark it somehow in the Object my server recieves. That would allow me to just Iterate once over the whole Object and only write those Configs that changed.

I saw that there is some kind of onChanged thing in HTML or JS that could do that. But i only saw it beeing used for direct changes and I only want changes to be applied when the Button is pressed.

I would like to avoid Javascript tho if possible!

I hope I could somehow express what I want to achieve. Thanks in advance!

Answer 1

You could mark each row with a data- attribute and use it to check if it changes.

For example in a given row:

<tr id="tr1" data-foo-bar="original">
   <td><input type="text" onchange="change();"></td>
</tr> 

When a value inside this row is changed you trigger this function:

function change(){
    document.getElementById("tr1").dataset.fooBar = "modified";
}

Then you can access this attribute with:

if (document.getElementById("tr1").dataset.fooBar == "original"){
    // hasn't been changed

}
else
{
    // it has changed

}