JavaScript: How to tell if any form fields have been modified

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!