我有一个多步骤表单，用户可以导航到任何页面以修改或添加信息。有一个菜单显示当前进度、用户已完成的步骤，并允许导航到任何已完成或待处理的步骤。
尽管有一个大按钮“保存并继续”，但一些用户单击此菜单以进一步导航。我必须检查 - 表单中的值是否已更改并询问：“保存更改？是/否”。
您建议我检查表单值是否已更改的最佳方法是什么（使用最少的客户端 JavaScript 代码）？
稍后编辑：
我忘了告诉多步骤表单在步骤之间使用回发。
【问题讨论】：
标签： javascript html webforms
jQuery "Dirty Form" 插件可以帮助你：
【讨论】：
尝试像这样检查表单值。 initFormChangeCheck() 的调用将所有值复制到一个镜像对象中，并在调用 checkChange 例程的每个表单元素上设置事件 mousedown 和 keydown。 您也可以按时间间隔检查。
var fList = new Object();
function initFormChangeCheck() {
for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) {
el = document.forms[0].elements[fOi];
fList[el.name] = el.value;
el.onmousedown = checkChange;
el.onkeydown = checkChange;
}
}
function checkChange() {
var changed = false;
for (var fOi = 0; fOi < document.forms[0].elements.length; fOi++) {
el = document.forms[0].elements[fOi];
if (fList[el.name] != el.value) {
changed = true;
}
}
document.forms[0].show_invoice.disabled = changed;
}
【讨论】：
如果没有 JQuery，这并不完全容易，因为表单的 onchange 事件在浏览器中并非一致支持。
我会说，如果可以，请使用其他答案中提供的 jQuery 插件之一。
如果无法使用 jQuery，请考虑为每个输入元素添加一个简单的 onchange='if (this.value != this.defaultValue) dirty_flag = true;'。如果您想要一个干净的方法，请在 <script> 部分执行此操作：
document.getElementById("formid").onchange =
function() { if (this.value ....) }
【讨论】：
jQuery Form Wizard plugin 在这种情况下应该很有用。
【讨论】：
由于您提到您在步骤之间发回，我将有一个隐藏字段来存储下一步是什么。默认情况下，这将是表单的下一步。 “保存并继续”按钮只是提交表单。
然后，每个菜单项都会将此隐藏表单的值设置为适当的步骤，然后它会提交表单。比如：
<script type="text/javascript">
function goToStep(step) {
document.getElementById("hiddenFieldID").value = step;
document.getElementById("formID").submit();
}
</script>
<ul id="menu">
<li><a href="javascript:goToStep(1);">Step 1</a></li>
<li><a href="javascript:goToStep(2);">Step 2</a></li>
etc...
</ul>
【讨论】：