Question

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

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

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

问题是我需要存储用于比较的数据，我将不得不在我的JavaScript中使用全局变量（这不是一个好习惯）。

Answer 1

你可以创建一个名为haschange的隐藏输入（比如说@ lastr2d2）

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

并添加jquery或javascript函数，将haschange的值从0更改为1 何时在每个onChange上发生一个事件textfields。例如，你可以创建一个像bellow一样的函数：

$(document).ready(function(){
    //Check this link 
    $("#textfields1").change(function(){
          $("#haschange").val(1);
    });
});

最后，当您点击最终提交的按钮时，您可以检查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);
             }
        });
    });

Answer 2

你可以这样做：

将数据属性添加到输入字段。替换“＆lt;％= serverValue％＆gt;”使用服务器代码使用的任何语法。

<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）：

<script>
  $(function () {
    var $form = $('#form');
    $form.on('submit', function (e) {
      $(form).find('[data-original-value]').each(function (index, el) {
        var $el = $(el);
        if ($el.val() === $el.attr('data-original-value]')) {
          e.preventDefault();
          console.log('please edit at least one value');
        }
      });
    });
  });
</script>

这是一个JSFiddle - http://jsfiddle.net/X4S4y/1/

Answer 3

您可以使用attr data-value（或任何您想要的名称）来保留原始值

示例:(假设您使用PHP）

<input type="text" value="<?php echo $value_1?>" data-value="<?php echo $value_1?>" class="input_text">
<input type="text" value="<?php echo $value_2?>" data-value="<?php echo $value_2?>" class="input_text">
<input type="text" value="<?php echo $value_3?>" data-value="<?php echo $value_3?>" class="input_text">
<input type="text" value="<?php echo $value_4?>" data-value="<?php echo $value_4?>" class="input_text">

在Jquery中，您可以检查输入文本是否有任何更改，然后提交表单

示例：

$(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;
      }
  });
})

检查是否编辑了字段？

3 个答案: