The following function can be used to determine if a form passed as parameter has been modified, returning true or false respectively. You may use it on submit events in order to avoid unnecessary post actions or like I do in other page links in order to warn the user of pending changes.
I have tested this with Firefox 2.0.0.3, but will post results for other browsers as well.
/**
* Check if a form has changed
*/
function formModified(aForm)
{
for (var i=0; i < aForm.elements.length; i++) {
// get the form current element
var curElement = aForm.elements[i];
// get the current element type
var myType = curElement.type;
// assume that the form is modified
var valueChanged = true;
if (myType == 'checkbox' || myType == 'radio') {
// if both the checked state and the DefaultCheck state are equal
if (curElement.checked == curElement.defaultChecked) {
valueChanged = false
}
} else if (myType == 'hidden' || myType == 'password' || myType == 'text' || myType == 'textarea') {
// if the current text is the same as the default text i.e. the original in the
// HTML Document
if (curElement.value == curElement.defaultValue) {
valueChanged = false
}
} else if (myType == 'select-one' || myType == 'select-multiple') {
for (var j=0; j < curElement.options.length; j++) {
if (curElement.options[j].selected && curElement.options[j].defaultSelected) {
valueChanged = false
}
}
} else
// unhandled type assume no change
valueChanged = false;
// the previously checked element has changed
if (valueChanged)
return true;
}
// all elements have their default value
return false;
}
In order to warn the user of pending changes you would have to write something like :
/**
* returns true if a user can leave a page based on wheither the
* aform parameter is committed.
*/
function canLeavePage(aForm)
{
// if no changes were made in the form
if (formModified(aForm) == false)
return true;
// else ask user
return confirm('Form data have been modified.\n' +
' Are you sure you want to leave this page ?') ;
}
To use this in your Web page, name your form with something like myForm or InputForm and place anywhere in the page a link like :
<a href="myPage.php"
onclick="return canLeavePage(InputForm);"/>
<img src="images/exit.png"
border="0"
align="middle"
hspace="2"
vspace="2"
title="Exit"/>
</a>
Enjoy!