Javascript 检查 Web 表单值是否已更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2847831/
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
Check if web form values have changed
提问by Andrew Florko
I have a multi-step form and user can navigate to any page to modify or add information. There is a menu that shows the current progress, the steps the user has completed, and allows to navigate to any completed or pending step.
我有一个多步骤表单，用户可以导航到任何页面来修改或添加信息。有一个菜单显示当前进度、用户已完成的步骤，并允许导航到任何已完成或待处理的步骤。
In spite of a big button "Save and Continue" some users click this menu to navigate further. I have to check - if values have changed in a form and ask: "Save changes? Yes/No".
尽管有一个大按钮“保存并继续”，一些用户还是单击此菜单进一步导航。我必须检查 - 表单中的值是否已更改并询问：“保存更改？是/否”。
What is the best way (with minimum client-side JavaScript code) you suggest me to check if form values have changed?
您建议我检查表单值是否已更改的最佳方法是什么（使用最少的客户端 JavaScript 代码）？
Edited a bit later:
稍后编辑：
I forgot to tell that the multi-step form uses postback between steps.
我忘了告诉多步表单在步骤之间使用回发。
采纳答案by Paddy
The jQuery "Dirty Form" plugin may help you out here:
jQuery "Dirty Form" 插件可以帮到你：
回答by houseman24
Try to check the form values like this. The call of initFormChangeCheck() copies all values into an mirror object and sets the events mousedown and keydown on each form element what are calling the checkChange routine. You also could check by an interval.
尝试像这样检查表单值。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;
}
Peter Gotrendy News
Peter Gotrendy 新闻
回答by Pekka
This is not entirely easy without JQuery because the onchangeevent for forms is not consistently supported across browsers.
如果没有 JQuery，这并不容易，因为onchange表单的事件在浏览器中并不一致。
I'd say if you can, use one of the jQuery plugins presented in the other answers.
我想说，如果可以，请使用其他答案中提供的 jQuery 插件之一。
If jQuery is out of the question, consider adding a simple onchange='if (this.value != this.defaultValue) dirty_flag = true;'to each input element. If you want a clean approach, do this in a <script>section:
如果 jQuery 是不可能的，请考虑onchange='if (this.value != this.defaultValue) dirty_flag = true;'为每个输入元素添加一个简单的。如果您想要一种干净的方法，请在一<script>节中执行此操作：
document.getElementById("formid").onchange =
function() { if (this.value ....) }
回答by rossipedia
Since you mentioned you're posting back between steps, I'd have a hidden field that stores what the next step is. By default this would be the next step of the form. The "Save and Continue" button just submits the form.
既然你提到你在步骤之间回发，我会有一个隐藏的字段来存储下一步是什么。默认情况下，这将是表单的下一步。“保存并继续”按钮只是提交表单。
Each menu entry then would then set the value of this hidden form to the appropriate step, and then it would submit the form. Something like:
然后每个菜单条目将这个隐藏表单的值设置为适当的步骤，然后它会提交表单。就像是：
<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>
回答by Sarfraz
The jQuery Form Wizard pluginshould be useful in this case.
在这种情况下，jQuery 表单向导插件应该很有用。
