Thursday, 26 April 2007

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, 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"



Tad said...


Thx for the script, has one bug in it, here is a fix:

if (curElement.options[j].selected == curElement.options[j].defaultSelected) {

should be...

if (curElement.options[j].selected && curElement.options[j].defaultSelected) {


Athanassios Bakalidis said...

Hi, and thanks for the bugbix
I have modified the script as suggested