检测HTMLinput表的已更改的input值

我试图找出如何我可以在以下预填充input表中检测更改的值。 我从我的MongoDB获取数据,并使用Express-Handlebars和nodejs将数据填充到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> 

当我点击提交button时,服务器将会收到一个包含所有configuration的对象。 然后我要写回到MongoDB。 但是我不想把不变的值写回去。 我可以迭代对象,但由于行基本上是无限的,可能导致服务器性能问题。

我想知道是否有检测值是否已经在特定的行中发生了变化,并以某种方式将其标记在我的服务器收到的对象中。 这将允许我只遍历整个对象的迭代,只写那些改变的configuration。

我看到在HTML或JS中有一些onChanged事情可以做到这一点。 但我只看到它用于直接更改,我只想要按下button时应用更改。

如果可能的话,我想避免Javascript寿!

我希望我能以某种方式expression我想达到的目标。 提前致谢!

你可以标记每一行数据属性,并用它来检查是否改变。

例如在给定的行中:

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

当这行内的一个值被改变时,你触发这个函数:

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

然后你可以通过以下方式访

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