检测HTML表单中是否至less有一个字段已被更改的最简单方法是什么？
我有一个超过20个字段的HTML表单。 我也有一些页面上的链接，将导致用户远离表单…可能没有保存任何更改。
我想警告（JS确认）用户onClick这些链接，如果任何表单域已经改变，但我不想创build一个巨大的switch语句，然后需要维护，因为我添加新的字段的forms。 我知道如何在Javascript中创build一个'if'语句的长列表，命名每个字段并检查每个值，但是如果我能够避开它，我不想这样做。
检查用户是否至less更改了一个字段值的最简单方法是什么？
途径
- 在显示之前序列化表单（及其所有值）（ jQuery方式 ， Prototype方式 ）
- 在
"onbeforeunload"事件处理程序中再次序列化它
如果两者不匹配，那么他们必须更改表单，所以从onbeforeunload处理程序返回一个string（例如“您有未保存的数据”）。
此方法允许表单字段发展，而“确认如果更改”逻辑保持不变。
示例 （混合的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.'; } };
我很确定这是一个坏主意，但我想把它扔在那里。
表单字段可以获得“默认值”（即字段在加载时的值），您可以将其与当前值进行比较。 如果向表单添加字段，则对所有字段进行简单的循环将消除维护的需要。
可能有也可能没有与“默认值”属性相关的各种浏览器错误，所以我不会相信这种方法没有广泛的testing。 下面的代码是一个概念的certificate，并没有在任何实际的应用程序中使用（由我）。
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; }
使用jQuery这非常简单。 你应该能够使用相同的前提来获得相同的结果在香草的JavaScript也。
var $inps = $('#myForm').find('input,select,textarea') , formAltered = false ; $inps.change(function() { formAltered = true; $inps.unbind('change'); // saves this function running every time. });
唯一的问题是如果你改变一个值，然后把它改回原来的值，它仍然会报告被修改的表单。
以下是您可以添加到表单中的单行代码：
$(':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);
这不会检查表单是否有不同的值，只有当用户更改表单时。 但是，它简单易用。
这可以用一个布尔variables来处理，我们称之为脏位处理。 如果您通常在网页中观察到，一旦用户对任何字段执行了一些编辑操作，表单将被视为脏（编辑）（即使编辑后数据保持不变）。 当用户尝试离开页面时，系统会提示用户是否要保存更改。
根据标准惯例，如果实际值被修改或者没有被修改，那么在编辑一些字段之后是不会检查的。 例如：如果用户编辑并附加“xyz”到文本字段，然后删除“xyz”，则表单数据本质上保持与之前相同，但表单仍被视为“脏”，并且当用户试图离开。
所以，如果你想实现这个东西变得非常简单。 你只需要将onchange（）事件处理函数添加到控件中，并在这些事件处理函数中设置全局布尔variables，如isDirty为true。
一旦用户想离开，你可以刷新一条消息：“当前页面可能有未保存的更改，你想保存吗？”。 即使他注意到他的编辑没有改变初始数据，用户也不会失望。
上面给出的答案实现了这种行为。 我写这个是因为你似乎有一个想法，通过它的初始值来检查每一个字段，看它在编辑之后是否真的改变了。 只是想告诉你，检查每一个领域是没有必要的。
