查找出来，如果HTML形式已经改变(Find out if html form has change

使用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:

Serializing the form is certainly an option, but it will not work if:

you want to know which fields have changed
it only needs to check a subset of the fields
dynamically adding or removing fields.

Fortunately, every form element has a default value associated with its object:

input, textarea : defaultValue
checkbox, radio : defaultChecked
select: defaultSelected

for ex: to ckeck if input or textarea has changed:

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:

不要在一个普通的方式。

您可以输入更改，然后触发change事件。

$('#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:

这是很容易在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斌测试

对于旧的浏览器不支持新的箭头/阵列功能：

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