jQuery 我如何知道表单输入已更改？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4562658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I know that a form input has changed?
提问by tkalve
I have a form generated by <% Ajax.BeginForm() {} %>which contains a lot of inputs and texareas.
我有一个<% Ajax.BeginForm() {} %>包含大量输入和 texarea 的表单。
When an input value change, I need to know about it and mark the input and the form as "dirty". If the user tries to leave the page without saving, I will ask him or her to confirm abandoning changes.
当输入值更改时，我需要了解它并将输入和表单标记为“脏”。如果用户试图离开页面而不保存，我会要求他或她确认放弃更改。
Any suggestion to how this should be done?
关于如何做到这一点的任何建议？
回答by Tom Brothers
The html controls include a property that holds the original value. You could compare this value with the current value to see if there have been any changes.
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
}
}
});
}
回答by SwabTheDeck
Resurrecting this old question because I thought of a simpler/better way. Instead of listening to events on the various inputs, you can serialize the initial form data, store it, and then serialize it again later and check if it's changed, like this:
复活这个老问题是因为我想到了一个更简单/更好的方法。您可以序列化初始表单数据，存储它，然后稍后再次序列化并检查它是否已更改，而不是侦听各种输入上的事件，如下所示：
var originalFormData = $('form#formId').serialize();
function checkFormChanged() {
if(originalFormData !== $('form#formId').serialize()) {
//it's dirty!
}
}
One additional advantage here is that if the user makes a change and then revertsit, this check will report the form as clean.
这里的另一个优点是，如果用户进行了更改，然后又将其还原，则此检查会将表单报告为干净。
回答by Damiqib
From jQuery Docs:
来自 jQuery 文档：
//This applies to whole form
$('#formID').change(function() {
alert('Form changed!');
});
And you could do like this to check only the inputs and have user notified, if they try to exit without saving changes.
如果他们尝试退出而不保存更改，您可以这样做以仅检查输入并通知用户。
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?');
}
});
回答by goenning
I would do this with jQuery. It would be something like this (just a draft, you may need to add/change some code):
我会用jQuery来做到这一点。它会是这样的（只是一个草稿，你可能需要添加/更改一些代码）：
$(document).ready(function() {
$('#formId:input').each(function(key) {
$(this).change(function() {
$(this).addClass('dirty');
});
});
});
Then, before POSTing, check if there is a dirty input. You can even add some color by using the dirty css class.
然后，在 POST 之前，检查是否有脏输入。您甚至可以使用dirty css 类添加一些颜色。
EDIT: typo fixed 'changed' to 'change'
编辑：错别字已将“已更改”更改为“更改”
回答by Santhosh S
You could use jquery plugin dirrty for identifying form dirty.
您可以使用 jquery 插件 dirrty 来识别表单脏。
https://github.com/rubentd/dirrty
https://github.com/rubentd/dirrty
In on("dirty") event set some global variable to true to identify form has changed.
在 on("dirty") 事件中，将一些全局变量设置为 true 以识别表单已更改。
Handle window.onbeforeunloador $(window).unload()event and get confirmation from user based on that variable value.
处理window.onbeforeunload或$(window).unload()事件并根据该变量值从用户那里获得确认。
The advantage of this plugin is you can track back if form is changed to original values again using 'on("clean") event
此插件的优点是您可以使用 'on("clean") 事件跟踪表单是否再次更改为原始值
