Check if web form values have changed

Question

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?

Edited a bit later:

I forgot to tell that the multi-step form uses postback between steps.

Answer 1

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.

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

Answer 2

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>

Answer 3

This is not entirely easy without JQuery because the onchange event for forms is not consistently supported across browsers.

I'd say if you can, use one of the jQuery plugins presented in the other answers.

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:

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

Answer 4

The jQuery Form Wizard plugin should be useful in this case.

See Demo Here

Answer 5

The jQuery "Dirty Form" plugin may help you out here:

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