检测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 }