Question

我有一个多步骤表单，用户可以导航到任何页面来修改或添加信息。有一个菜单显示当前进度，用户已完成的步骤，并允许导航到任何已完成或待处理的步骤。

尽管有一个大按钮“保存并继续”，但有些用户会点击此菜单进一步导航。我必须检查 - 如果表格中的值已更改并询问：“保存更改？是/否”。

最好的方法是什么（使用最少的客户端JavaScript代码），建议我检查表单值是否已更改？

稍后编辑：

我忘了告诉多步表单在步骤之间使用回发。

Answer 1

jQuery“Dirty Form”插件可以帮助你：

http://plugins.jquery.com/project/dirtyform

Answer 2

尝试检查这样的表单值。 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;
}

彼得 Gotrendy News

Answer 3

如果没有JQuery，这并不容易，因为浏览器不一致支持表单的onchange事件。

如果可以，我会说，使用其他答案中提供的jQuery插件之一。

如果jQuery不可能，请考虑为每个输入元素添加一个简单的onchange='if (this.value != this.defaultValue) dirty_flag = true;'。如果您想要一个干净的方法，请在<script>部分中执行此操作：

document.getElementById("formid").onchange = 
 function() { if (this.value ....) }

Answer 4

jQuery Form Wizard plugin 在这种情况下应该很有用。

<强> See Demo Here

Answer 5

由于您提到您在步骤之间回发，我会有一个隐藏字段，用于存储下一步的内容。默认情况下，这将是表单的下一步。 “保存并继续”按钮只需提交表单。

然后，每个菜单条目都会将此隐藏表单的值设置为适当的步骤，然后它将提交表单。类似的东西：

<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>

检查Web表单值是否已更改

5 个答案: