Check if web form values has changed. Best practice

Question

Hello everybody,

I have multi-step form and user can navigate to any page to modify or add information. There is a menu that shows progress and steps user completed. This menu allows to navigate to any step user completed or going to complete.

Inspite of 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.

Thank you in advance!

Edited a bit later:

I forgot to tell that multistep form uses postback between steps.

Answer 1

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

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

Answer 2

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

See Demo Here

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

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>