我如何知道表单输入已更改？

Question

我有一个由 <% Ajax.BeginForm() {} %> 生成的表单，其中包含大量输入和 texareas。

当输入值发生变化时，我需要了解它并将输入和表单标记为“脏”。如果用户尝试在不保存的情况下离开页面，我会要求他或她确认放弃更改。

对于如何做到这一点有什么建议吗？

Answer 1

复活这个老问题是因为我想到了一个更简单/更好的方法。您可以序列化初始表单数据，存储它，然后稍后再次序列化并检查它是否已更改，而不是侦听各种输入上的事件，如下所示：

var originalFormData = $('form#formId').serialize();
function checkFormChanged() {
    if(originalFormData !== $('form#formId').serialize()) {
        //it's dirty!
    }
}

这里的另一个优点是，如果用户进行更改，然后恢复它，此检查将报告表单为干净的。

Answer 2

html 控件包含一个保存原始值的属性。您可以将该值与当前值进行比较，看看是否有任何变化。

function getHasChanges() {
    var hasChanges = false;

    $(":input:not(:button):not([type=hidden])").each(function () {
        if ((this.type == "text" || this.type == "textarea" || this.type == "hidden") && this.defaultValue != this.value) {
            hasChanges = true;
            return false;             }
        else {
            if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) {
                hasChanges = true;
                return false;                 }
            else {
                if ((this.type == "select-one" || this.type == "select-multiple")) {
                    for (var x = 0; x < this.length; x++) {
                        if (this.options[x].selected != this.options[x].defaultSelected) {
                            hasChanges = true;
                            return false;
                        }
                    }
                }
            }
        }
    });

    return hasChanges;
}

function acceptChanges() {
    $(":input:not(:button):not([type=hidden])").each(function () {
        if (this.type == "text" || this.type == "textarea" || this.type == "hidden") {
            this.defaultValue = this.value;
        }
        if (this.type == "radio" || this.type == "checkbox") {
            this.defaultChecked = this.checked;
        }
        if (this.type == "select-one" || this.type == "select-multiple") {
            for (var x = 0; x < this.length; x++) {
                this.options[x].defaultSelected = this.options[x].selected
            }
        }
    });
}

Answer 3

来自 jQuery 文档：

//This applies to whole form
$('#formID').change(function() {
  alert('Form changed!');
});

您可以这样做来仅检查输入并在用户尝试退出而不保存更改时通知用户。

var inputsChanged = false;
$('#formID input').change(function() {
  inputsChanged = true;
});

$(window).unload(function() {
  if (inputsChanged === true) {
    alert('Would you like to save your edits before exiting?'); 
  }    
});

jQuery API .change()

Answer 4

我会用 jQuery 来做这件事。它会是这样的（只是一个草稿，您可能需要添加/更改一些代码）：

$(document).ready(function() {  
    $('#formId:input').each(function(key) {
        $(this).change(function() {
            $(this).addClass('dirty');
        });
    });
});

然后，在发布之前，检查是否存在脏输入。您甚至可以使用 dirty css 类添加一些颜色。

编辑：拼写错误将“更改”修复为“更改”

Answer 5

您可以使用 jquery 插件 dirrty 来识别表单是否脏。

https://github.com/rubentd/dirrty

在 on("dirty") 事件中设置一些全局的变量为 true 来标识表单已更改。

处理 window.onbeforeunload 或 $(window).unload() 事件并根据该变量值获取用户确认。

该插件的优点是您可以使用 'on("clean") 事件再次跟踪表单是否更改为原始值