检测html表单是否被编辑的通用方法

94

我有一个选项卡式的html表单。从一个选项卡导航到另一个选项卡时，即使数据没有更改，当前选项卡的数据也会保留（在数据库中）。

我只想在表单被编辑的情况下进行持久化调用。该表格可以包含任何控件。污损表单不必通过键入一些文本来完成，但是在日历控件中选择日期也可以。

实现此目的的一种方法是默认情况下以只读模式显示表单并具有“编辑”按钮，如果用户单击“编辑”按钮，则会进行对DB的调用（再次，无论是否修改数据） （这是对现有内容的更好的改进）。

我想知道如何编写一个通用的javascript函数来检查是否有任何控件值已被修改？

javascript  jquery  html 
— 萨提亚
source
Craig Buckler在SitePoint上发布了一个有趣的解决方案。特别令人感兴趣的是，该解决方案不依赖jQuery，并且与跨浏览器兼容。
— MagicAndi 2011年

Answers:

158

在纯JavaScript中，这并不是一件容易的事，但是jQuery使它非常容易做到：

$("#myform :input").change(function() {
   $("#myform").data("changed",true);
});

然后在保存之前，可以检查它是否已更改：

if ($("#myform").data("changed")) {
   // submit the form
}

在上面的示例中，表单的ID等于“ myform”。

如果您需要多种形式的文档，则可以轻松地将其转换为插件：

$.fn.extend({
 trackChanges: function() {
   $(":input",this).change(function() {
      $(this.form).data("changed", true);
   });
 }
 ,
 isChanged: function() { 
   return this.data("changed"); 
 }
});

然后，您可以简单地说：

$("#myform").trackChanges();

并检查表单是否已更改：

if ($("#myform").isChanged()) {
   // ...
}
— 菲利普·莱拜特
source
13
这很简单。但是，如果用户更改了表单输入，然后还原了更改（例如，通过单击两次复选框，则将被视为已修改）。这是否可以接受当然取决于上下文。替代方法请参见stackoverflow.com/questions/10311663/…–
— jlh
1
现场输入需要一些更改 trackChanges: function () { $(document).on('change', $(this).find(':input'), function (e) { var el = $(e.target); $(el).closest('form').data("changed", true); });
— Dimmduh
36

如果JQuery没问题。在Google上进行的快速搜索发现了MD5和SHA1哈希算法的Javascript实现。如果需要，可以连接所有表单输入并对其进行哈希处理，然后将该值存储在内存中。当用户完成时。连接所有值，然后再次哈希。比较2个散列。如果它们相同，则用户未更改任何表单字段。如果它们不同，则已经编辑了某些内容，您需要调用持久性代码。

— 马修·维尼斯（Matthew Vines）
source
2
这是我对这个问题的预期，是否有图书馆？
— 哈米兹
如果您将所有字段串联在一起但没有对它进行散列，结果是否会相同？
— ashleedawg
是的，但是数据本身可能大于散列。
— JRG
25

我不确定是否能正确回答您的问题，但是addEventListener呢？如果您不太关心IE8支持，那应该没问题。以下代码为我工作：

var form = document.getElementById("myForm");

form.addEventListener("input", function () {
    console.log("Form has changed!");
});
— 抄写器
source
最适合我的需求
— 祝福
8

实现此目的的另一种方法是序列化表单：

$(function() {
    var $form = $('form');
    var initialState = $form.serialize();
    
    $form.submit(function (e) {
      if (initialState === $form.serialize()) {
        console.log('Form is unchanged!');
      } else {
        console.log('Form has changed!');
      }
      e.preventDefault();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Field 1: <input type="text" name="field_1" value="My value 1"> <br>
Field 2: <input type="text" name="field_2" value="My value 2"> <br>
Check: <input type="checkbox" name="field_3" value="1"><br>
<input type="submit">
</form>
展开摘要

— 尼科斯基普
source
我喜欢您的想法，特别是如果您剔除jQuery并使用普通JavaScript进行操作。我意识到假设jQuery可用的问题，但是没有理由没有一个更广泛适用的解决方案，类似于注释中的警告。
— 鲁芬
4

这是我的操作方式（不使用jQuery）。

在我的情况下，我希望不计入一个特定的表单元素，因为是触发检查的元素，因此总是会更改。例外元素名为“ reporting_period”，并在函数“ hasFormChanged（）”中进行了硬编码。

为了进行测试，使一个元素调用函数“ changeReportingPeriod（）”，您可能要命名其他名称。

重要说明：在将值设置为其原始值时（通常在页面加载时，但在我的情况下不是），必须调用setInitialValues（）。

注意：我并不是说这是一个优雅的解决方案，实际上我不相信优雅的JavaScript解决方案。我个人对JavaScript的强调是可读性，而不是结构上的优雅（就好像JavaScript中那样）。编写JavaScript时，我根本不关心文件大小，因为这就是gzip的目的，而尝试编写更紧凑的JavaScript代码总是会导致无法维护的问题。我不表示歉意，不表示re悔，也拒绝辩论。是JavaScript。抱歉，我必须说清楚这一点，以便说服自己应该打扰。要开心！:)


    var initial_values = new Array();

    // Gets all form elements from the entire document.
    function getAllFormElements() {
        // Return variable.
        var all_form_elements = Array();

        // The form.
        var form_activity_report = document.getElementById('form_activity_report');

        // Different types of form elements.
        var inputs = form_activity_report.getElementsByTagName('input');
        var textareas = form_activity_report.getElementsByTagName('textarea');
        var selects = form_activity_report.getElementsByTagName('select');

        // We do it this way because we want to return an Array, not a NodeList.
        var i;
        for (i = 0; i < inputs.length; i++) {
            all_form_elements.push(inputs[i]);
        }
        for (i = 0; i < textareas.length; i++) {
            all_form_elements.push(textareas[i]);
        }
        for (i = 0; i < selects.length; i++) {
            all_form_elements.push(selects[i]);
        }

        return all_form_elements;
    }

    // Sets the initial values of every form element.
    function setInitialFormValues() {
        var inputs = getAllFormElements();
        for (var i = 0; i < inputs.length; i++) {
            initial_values.push(inputs[i].value);
        }
    }

    function hasFormChanged() {
        var has_changed = false;
        var elements = getAllFormElements();

        for (var i = 0; i < elements.length; i++) {
            if (elements[i].id != 'reporting_period' && elements[i].value != initial_values[i]) {
                has_changed = true;
                break;
            }
        }

        return has_changed;
    }

    function changeReportingPeriod() {
        alert(hasFormChanged());
    }
— 图金
source
3

无需jQuery，就可以在本机JavaScript中轻松检测到表单更改：

function initChangeDetection(form) {
  Array.from(form).forEach(el => el.dataset.origValue = el.value);
}
function formHasChanges(form) {
  return Array.from(form).some(el => 'origValue' in el.dataset && el.dataset.origValue !== el.value);
}


initChangeDetection()可以在页面的整个生命周期中安全地多次调用：请参见在JSBin上进行测试

对于不支持新的箭头/数组功能的旧版浏览器：

function initChangeDetection(form) {
  for (var i=0; i<form.length; i++) {
    var el = form[i];
    el.dataset.origValue = el.value;
  }
}
function formHasChanges(form) {
  for (var i=0; i<form.length; i++) {
    var el = form[i];
    if ('origValue' in el.dataset && el.dataset.origValue !== el.value) {
      return true;
    }
  }
  return false;
}
— 克里斯
source
我的表格始终返回true
— Rich Stone
您可以将表格发布在JSBin或Gist上，以便我们看到您的表格吗？
— AnthumChris
我的错，我选择了jquery而不是JS的表单，如您的示例所示。这是一个不错且干净的js解决方案，没有序列化过载。谢谢！
— Rich Stone
2

这是本机JavaScript中的polyfill方法演示，它使用FormData()API检测创建，更新和删除的表单条目。您可以使用来检查是否有任何更改，HTMLFormElement#isChanged并使用来获取一个包含与重置表单不同的对象HTMLFormElement#changes（假设它们未被输入名称遮盖）：

Object.defineProperties(HTMLFormElement.prototype, {
  isChanged: {
    configurable: true,
    get: function isChanged () {
      'use strict'

      var thisData = new FormData(this)
      var that = this.cloneNode(true)

      // avoid masking: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
      HTMLFormElement.prototype.reset.call(that)

      var thatData = new FormData(that)

      const theseKeys = Array.from(thisData.keys())
      const thoseKeys = Array.from(thatData.keys())

      if (theseKeys.length !== thoseKeys.length) {
        return true
      }

      const allKeys = new Set(theseKeys.concat(thoseKeys))

      function unequal (value, index) {
        return value !== this[index]
      }

      for (const key of theseKeys) {
        const theseValues = thisData.getAll(key)
        const thoseValues = thatData.getAll(key)

        if (theseValues.length !== thoseValues.length) {
          return true
        }

        if (theseValues.some(unequal, thoseValues)) {
          return true
        }
      }

      return false
    }
  },
  changes: {
    configurable: true,
    get: function changes () {
      'use strict'

      var thisData = new FormData(this)
      var that = this.cloneNode(true)

      // avoid masking: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
      HTMLFormElement.prototype.reset.call(that)

      var thatData = new FormData(that)

      const theseKeys = Array.from(thisData.keys())
      const thoseKeys = Array.from(thatData.keys())

      const created = new FormData()
      const deleted = new FormData()
      const updated = new FormData()

      const allKeys = new Set(theseKeys.concat(thoseKeys))

      function unequal (value, index) {
        return value !== this[index]
      }

      for (const key of allKeys) {
        const theseValues = thisData.getAll(key)
        const thoseValues = thatData.getAll(key)

        const createdValues = theseValues.slice(thoseValues.length)
        const deletedValues = thoseValues.slice(theseValues.length)

        const minLength = Math.min(theseValues.length, thoseValues.length)

        const updatedValues = theseValues.slice(0, minLength).filter(unequal, thoseValues)

        function append (value) {
          this.append(key, value)
        }

        createdValues.forEach(append, created)
        deletedValues.forEach(append, deleted)
        updatedValues.forEach(append, updated)
      }

      return {
        created: Array.from(created),
        deleted: Array.from(deleted),
        updated: Array.from(updated)
      }
    }
  }
})

document.querySelector('[value="Check"]').addEventListener('click', function () {
  if (this.form.isChanged) {
    console.log(this.form.changes)
  } else {
    console.log('unchanged')
  }
})
<form>
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value="" tabindex="1" />
  </div>

  <div>
    <h4>Radio Button Choice</h4>

    <label for="radio-choice-1">Choice 1</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

    <label for="radio-choice-2">Choice 2</label>
    <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
  </div>

  <div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>

  <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>

  <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox" id="checkbox" />
  </div>

  <div>
    <input type="button" value="Check" />
  </div>
</form>
展开摘要

— 帕特里克·罗伯茨
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.