javascript - 检测是否编辑了 html 表单的通用方法

Question

我有一个带标签的 html 表单。从一个选项卡导航到另一个选项卡后，即使数据没有更改，当前选项卡的数据也会保留(在数据库中)。

我想仅在编辑表单时才进行持久性调用。窗体可以包含任何类型的控件。不必通过键入一些文本来弄脏表单，但在日历控件中选择一个日期也可以。

实现此目的的一种方法是默认以只读模式显示表单并具有“编辑”按钮，如果用户单击编辑按钮，则调用数据库(再次，无论是否数据已修改。这是对当前现有内容的更好改进)。

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

Answer 1

在纯 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()) {
   // ...
}