检测HTML输入表的更改的输入值

Seitrox

我正在尝试找出如何在以下预填充的输入表中检测更改的值。我从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>

当我单击“提交”按钮时,服务器将收到一个带有所有配置的对象。然后我要写回MongoDB。但我不想将未更改的值写回去。我可以遍历对象,但是由于行基本上是无限的,因此可能导致服务器性能问题。

我想知道是否有必要检测特定行中的值是否已更改,并以某种方式在服务器接收的对象中对其进行标记。那将允许我对整个对象进行一次迭代,并仅编写那些已更改的配置。

我看到HTML或JS中有某种onChanged东西可以做到这一点。但是我只看到它蜂直接用于更改,我只希望在按下按钮时应用更改。

如果可能,我想避免使用Javascript!

我希望我能以某种方式表达我想要实现的目标。提前致谢!

兰雷克斯

您可以用数据属性标记每一行,并使用它来检查其是否更改。

例如,在给定的行中:

<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

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章