检测HTML表单上是否至少更改了一个字段的最简单方法是什么？

Question

我有一个包含20多个字段的HTML表单.我在页面上还有一些链接会引导用户远离表单...可能没有保存任何更改.

我想警告(JS确认)用户onClick这些链接,如果任何表单字段已更改,但我不想创建一个巨大的switch语句,然后我需要维护,因为我向表单添加新字段.我知道如何在Javascript中创建一个很长的'if'语句列表,命名每个字段并检查每个值,但如果我能逃脱它,我不想这样做.

检查用户是否更改了至少一个字段值的最简单方法是什么？

Answer 1

途径

1. 在显示之前序列化表单(及其所有值)(jQuery方式,Prototype方式)
2. 在"onbeforeunload"事件处理程序中再次序列化它

如果两者不匹配,则它们必须已更改表单,因此从onbeforeunload处理程序返回一个字符串(例如"您有未保存的数据").

此方法允许表单字段进化,而"确认是否已更改"逻辑保持不变.

示例 (混合javascript和jquery)

var form_clean;

// serialize clean form
$(function() { 
    form_clean = $("form").serialize();  
});

// compare clean and dirty form before leaving
window.onbeforeunload = function (e) {
    var form_dirty = $("form").serialize();
    if(form_clean != form_dirty) {
        return 'There is unsaved form data.';
    }
};

Answer 2

我很确定这是一个坏主意,但我想把它扔出去.

表单字段有一种方法可以获得"默认值"(即字段加载时的值),您可以将其与当前值进行比较.如果向表单添加字段,则对所有字段进行简单循环将消除维护需求.

可能存在或不存在与"默认值"属性相关联的各种浏览器错误,因此如果不进行大量测试,我将不相信此方法.下面的代码是一个概念证明,在任何实际应用中都没有(由我)使用.

function IsDirty(form) {
    for (var i=0; i<form.elements.length; i++) {
        var field = form.elements[i];
        switch (field.type) {
            case "select-multiple":
            case "select-one":
                var options = field.options;
                for (var j=0; j<options.length; j++) {
                    if(options[j].selected != options[j].defaultSelected) return true;
                }
                break;
            case "text":
            case "file":
            case "password":
                if (field.value != field.defaultValue) return true;
                break;
            case "checkbox":
            case "radio":
                if (field.checked != field.defaultChecked) return true;
                break;
        }
    }
    return false;
}

Answer 3

使用jQuery这很容易.您应该能够使用相同的前提来在vanilla javascript中实现相同的结果.

var $inps = $('#myForm').find('input,select,textarea')
  , formAltered = false
;
$inps.change(function() {
    formAltered = true;
    $inps.unbind('change'); // saves this function running every time.
});

唯一的问题是,如果您更改一个值,然后将其更改回原始值,它仍然会将表单报告为已更改.

Answer 4

这是您可以添加到表单的单行内容:

$(':input',document.myForm).bind("change", function() { 
  enablePrompt(true); }); // Prevent accidental navigation away

然后,您可以为整个站点创建enableUnloadPrompt()函数:

function enablePrompt(enabled) {
  window.onbeforeunload = enabled ? "Your changes are not saved!" : null;
}

最后,在您正确提交表单之前,请确保:

enablePrompt(false);

只有在用户更改了表单时,才会检查表单的值是否不同.但是,它简单易用.