Question

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

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

Answer 1

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

我克服这个障碍的一种方法是在显示之后立即将表单状态捕获到变量中，然后在提交之前检查状态是否已更改并采取相应措施。

存储的简单状态是serialize函数返回的内容。存储状态的简单位置是使用数据功能。 jquery都可以使用serialize和data。

当然，您可以使用其他不同形式的状态（某种形式的哈希）或存储来处理此状态（例如标准全局变量）。

这是一些原型代码：

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

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

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

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

你可以把所有这些都包装成副本＆amp;粘贴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
复选框，radio：defaultChecked
选择：defaultSelected

对于ex：如果输入或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

不是经常性的。

您可以使用输入进行更改，然后触发更改事件。

$('#inputId').val('foo').trigger('change');

或与此：

$('#inputId').val('foo').change();

Answer 4

这就是我所做的（我使用zaf的答案找到了我的解决方案）

$("form").change(function() {
    $(this).data("changed","true");
});

$("input[type='submit']").click(function() {
    if($("form").data("changed") == "true") {
        var discard = confirm("Some unsaved changes. Discard them ?");
        if(!discard) return false;
    }
});

Answer 5

这在没有jQuery的JavaScript中很容易实现。 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);
}

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

Answer 6

尝试onchange属性根据{{3}}，只要元素，选择或检查状态的内容发生变化，它就会触发。

找出html表单是否已更改

6 个答案: