通过javascript跟踪表单中的更改的最佳方法是什么？

Question

我想通过javascript跟踪表单中输入的变化.我的意图是(但不限于)

• 只有在某些内容发生变化时才启用"保存"按钮
• 如果用户想要关闭页面并且未保存某些内容则发出警报

想法？

Answer 1

循环遍历所有输入元素,并onchange在每个元素上放置一个处理程序.当它触发时,设置一个标志,让您知道表单已更改.它的基本版本很容易设置,但是如果有人将输入从"a"更改为"b"然后再返回"a",则不足以识别.如果抓住那个案件很重要,那么它仍然是可能的,但需要更多的工作.

这是jQuery中的一个基本示例:

$("#myForm")
    .on("input", function() {
        // do whatever you need to do when something's changed.
        // perhaps set up an onExit function on the window
        $('#saveButton').show();
    })
;

Answer 2

JS中的文本表单元素公开了.value属性和.defaultValue属性,因此您可以轻松实现以下内容:

function formChanged(form) {
  for (var i = 0; i < form.elements.length; i++) {
      if(form.elements[i].value != form.elements[i].defaultValue) return(true);
  }
  return(false);
}

对于复选框和单选按钮,查看是否element.checked != element.defaultChecked,以及对于HTML <select />元素,您需要循环遍历select.options数组并检查每个选项是否selected == defaultSelected.

您可能希望使用类似jQuery的框架来将处理程序附加到onchange每个单独表单元素的事件.这些处理程序可以调用您的formChanged()代码并修改enabled"保存"按钮的属性,和/或附加/分离文档正文beforeunload事件的事件处理程序.

Answer 3

尝试

function isModifiedForm(form){
  var __clone = $(form).clone();
  __clone[0].reset();
  return $(form).serialize() == $(__clone).serialize();
}

希望它的帮助))

Answer 4

这是一个简单的用于检测表单更改的 javascript 和 jquery 方法。它禁用提交按钮，直到进行更改。它检测通过提交表单以外的方式离开页面的尝试。它解释了用户的“撤消”，它被封装在一个函数中以便于应用，并且它不会在提交时失火。只需调用该函数并传递表单的 ID。

此函数在页面加载时序列化表单一次，并在用户离开页面之前再次序列化。如果两个表单状态不同，则会显示提示。

试试看：http : //jsfiddle.net/skibulk/ev5rE/

function formUnloadPrompt(formSelector) {
    var formA = $(formSelector).serialize(), formB, formSubmit = false;

    // Detect Form Submit
    $(formSelector).submit( function(){
        formSubmit = true;
    });

    // Handle Form Unload    
    window.onbeforeunload = function(){
        if (formSubmit) return;
        formB = $(formSelector).serialize();
        if (formA != formB) return "Your changes have not been saved.";
    };

    // Enable & Disable Submit Button
    var formToggleSubmit = function(){
        formB = $(formSelector).serialize();
        $(formSelector+' [type="submit"]').attr( "disabled", formA == formB);
    };

    formToggleSubmit();
    $(formSelector).change(formToggleSubmit);
    $(formSelector).keyup(formToggleSubmit);
}



// Call function on DOM Ready:

$(function(){
    formUnloadPrompt('form');
});