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.

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.

• javascript
• html
• webforms

• Need more information. Is each page of the form a separate URL? Are they posting back and forth when navigation the form? Or is it completely client-side using jquery or javascript? Also, what server-side language are you using? PHP? Rails? Python? Etc.. – rossipedia Commented May 17, 2010 at 9:19
• Sorry, I mentioned javascript client code only – Andrew Florko Commented May 17, 2010 at 9:22

5 Answers 5

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

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

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

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 ....) }

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

See Demo Here

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>