Javascript 检查字段是否已编辑？

我有7个文本字段放在一个表中。当用户按submit时，我从服务器获取这些文本字段数据。在用获取的数据填充textfield之后，用户通过一个新的按钮submit将该数据提交给服务器

如果用户按原样提交数据，我需要显示一条错误消息，“至少必须编辑一个字段。”。如果它至少编辑一个字段，然后提交，我将更新服务器上的数据

如何检查用户是否更改了字段

---

问题是我需要存储为比较而获取的数据，我必须在JavaScript的全局变量中进行比较（这不是一个好的做法）。

您可以这样做：

向输入字段添加数据属性。将“”替换为服务器代码使用的任何语法

<form id="form">
  <table>
    <tr>
      <td><input type="text" value="<%= serverValue %>" data-original-value="<%= serverValue %>" /></td>
    </tr>
  </table>
  <input type="submit" value="submit" />
</form>

然后在页面上放置一个脚本标记，如下所示（假设您使用的是jQuery）：

$（函数（）{
变量$form=$（“#form”）；
$form.on（'submit'，函数（e）{
$（表单）.find（“[数据原始值]”）.each（函数（索引，el）{
变量$el=$（el）；
如果（$el.val（）==$el.attr（'data-original-value'））{
e、 预防默认值（）；
console.log（'请至少编辑一个值'）；
}
});
});
});

---

下面是一个JSFIDLE-

您可以这样做：

向输入字段添加数据属性。将“”替换为服务器代码使用的任何语法

<form id="form">
  <table>
    <tr>
      <td><input type="text" value="<%= serverValue %>" data-original-value="<%= serverValue %>" /></td>
    </tr>
  </table>
  <input type="submit" value="submit" />
</form>

然后在页面上放置一个脚本标记，如下所示（假设您使用的是jQuery）：

$（函数（）{
变量$form=$（“#form”）；
$form.on（'submit'，函数（e）{
$（表单）.find（“[数据原始值]”）.each（函数（索引，el）{
变量$el=$（el）；
如果（$el.val（）==$el.attr（'data-original-value'））{
e、 预防默认值（）；
console.log（'请至少编辑一个值'）；
}
});
});
});

---

下面是一个JSFIDLE-

您可以创建一个名为

haschange

的隐藏输入（比如@lastr2d2）

<input type="hidden" name="haschange" id="haschange" value="0" />

最后，当您单击“最终提交”按钮时，您可以检查

haschange

值是否为

0

或

1

---编辑-- 如果您想检查原始更改（请参阅@antindexer注释），则可以使用以下代码

$(document).ready(function(){
        //Check this link 
        $("#textfields1").change(function(){
             var defaultValue = document.getElementById('textfields1').defaultValue;
             var currentValue = document.getElementById('textfields1').value;
             if( currentValue != currentValue  ) {
                $("#haschange").val(1);
             }
        });
    });

---

您可以创建一个名为

haschange

like的隐藏输入（比如@lastr2d2）

<input type="hidden" name="haschange" id="haschange" value="0" />

最后，当您单击“最终提交”按钮时，您可以检查

haschange

值是否为

0

或

1

---编辑-- 如果您想检查原始更改（请参阅@antindexer注释），则可以使用以下代码

$(document).ready(function(){
        //Check this link 
        $("#textfields1").change(function(){
             var defaultValue = document.getElementById('textfields1').defaultValue;
             var currentValue = document.getElementById('textfields1').value;
             if( currentValue != currentValue  ) {
                $("#haschange").val(1);
             }
        });
    });

---

您可以使用attr

数据值

（或您想要的任何名称）来保留原始值

示例：（假设您使用PHP）

---

您可以使用attr

数据值

（或您想要的任何名称）来保留原始值

示例：（假设您使用PHP）

---

您可以使用data（）将其存储在文本字段中。您可以为每个字段创建隐藏输入（或data xx属性），而不是将数据存储在全局变量中。您可以使用data（）将其存储在文本字段中。您可以创建隐藏输入（或data xx属性），而不是将数据存储在全局变量中对于每个字段，如果我更改一个值，将会发生什么情况。并将此值更改回原来的值。在这种情况下，您的代码将按更改的方式工作。所以你应该仔细阅读这个问题。你能告诉我他到底在哪里说这样的话吗？“问题是我需要存储获取的数据进行比较，我必须在JavaScript中的全局变量中进行比较（这不是一个好的做法）。”然后。我正在编辑我的answer@antindexer再次检查我的答案！如果我更改一个值，将会发生什么情况。并将此值更改回原来的值。在这种情况下，您的代码将按更改的方式工作。所以你应该仔细阅读这个问题。你能告诉我他到底在哪里说这样的话吗？“问题是我需要存储获取的数据进行比较，我必须在JavaScript中的全局变量中进行比较（这不是一个好的做法）。”然后。我正在编辑我的answer@antindexer再次检查我的答案！

$(document).ready(function(){
   $("form").submit(function(){
      var is_changed = false;
      $(".input_text").each(function(){
         if ( $(this).val() == $(this).attr("data-value") {
               return false;
         } else {
              is_changed = true;
         }
      });
      if( is_change == true ) {
         alert("Please change at least one input");
         return false;
      }
  });
})