找出html表单是否已更改

Question

使用jquery我已经为表单添加了一个更改处理程序.只有当用户手动更改输入而不是某些其他代码更改输入时,才能在任何输入更改时工作.

是否有任何方法可以检测表单是否已更改,即使其输入由代码更改？

Answer 1

是的,似乎对此存在一些混淆.在一个理想的世界中,你会期望只要输入发生变化就会发生onchange事件,但事实并非如此.我确信有充分的理由 - 也许不是.

我克服这个障碍的一种方法是在显示它之后将表单状态捕获到变量中,然后在提交之前检查状态是否已更改并相应地采取行动.

存储的简单状态是序列化函数返回的内容.存储状态的简单位置是使用数据功能.这两个序列和数据都可以使用jQuery.

当然,您可以为此状态使用其他不同形式的状态(某种形式的哈希)或存储(例如标准全局变量).

这是一些原型代码:

如果您的表单ID是'xform',那么您可以在表单显示时调用以下代码:

$('#xform').data('serialize',$('#xform').serialize());

然后,当您需要检查时,例如在提交按钮之前,您可以使用:

if($('#xform').serialize()!=$('#xform').data('serialize')){
    // Form has changed!!!
}

你可以将所有这些包装成一个复制和粘贴的javascript片段,它将为你提供一个formHasChanged()函数来调用你需要它的地方(没有测试):

$(function() {
    $('#xform').data('serialize',$('#xform').serialize());
});
function formHasChanged(){
    if($('#xform').serialize()!=$('#xform').data('serialize')){
        return(true);
    }
    return(false);
}

但我会停在这里,否则我将创建另一个jquery插件.

Answer 2

序列化表单当然是一种选择,但如果符合以下条件则不起作用:

• 您想知道哪些字段已更改
• 它只需要检查字段的子集
• 动态添加或删除字段.

幸运的是,每个表单元素都有一个与其对象关联的默认值:

• input,textarea:defaultValue
• 复选框,收音机:defaultChecked
• 选择:defaultSelected

例如:如果输入或textarea已更改,则为ckeck:

var changed = false;
$(":text,textarea").each(function(){
    changed = this.value != this.defaultValue;
    return !changed; // return if at least one control has changed value
});

Answer 3

这可以在 JavaScript 中轻松实现，无需使用 jQuery。initChangeDetection()可以多次调用：

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

在 JS Bin 上测试

对于不支持较新的箭头/数组函数的旧浏览器：

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;
}