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

javascript jquery html

2022-08-30 05:31:41

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

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

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

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

答案 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()) {
   // ...
}

答案 2

我不确定我的问题是否正确，但是addEventListener呢？如果你不太关心IE8支持，这应该没问题。以下代码对我有用：

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

form.addEventListener("input", function () {
    console.log("Form has changed!");
});