Question

If all fields in the form are dirty return true if not then return false.
Here is my code.

function getHasChanges() {
    var hasChanges = false;

    $(":input:not(:button):not([type=hidden])").each(function () {
        if ((this.type == "text" || this.type == "textarea" || this.type == "hidden") && this.defaultValue != this.value) {
            hasChanges = true;
            return false;             }
        else {
            if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) {
                hasChanges = true;
                return false;                 }
            else {
                if ((this.type == "select-one" || this.type == "select-multiple")) {
                    for (var x = 0; x < this.length; x++) {
                        if (this.options[x].selected != this.options[x].defaultSelected) {
                            hasChanges = true;
                            return false;
                        }
                    }
                }
            }
        }
    });

    return hasChanges;
}

I used this code and tried to manipulate it but I couldn’t figure it out.

My question is: How to check if all fields on the form are dirty?

Answer 1

You are doing it wrong i think. You are returning false everywhere so the output will be always false irrespective of whether it has a change or not. Even if you have hasChanges = true; you are returning false Change your code:

function getHasChanges() {
    var hasChanges = false;

    $(":input:not(:button):not([type=hidden])").each(function () {
        if ((this.type == "text" || this.type == "textarea" || this.type == "hidden") && this.defaultValue != this.value) {
            hasChanges = true;
         }
        else 
         {
            if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) {
                hasChanges = true;
             }
            else 
            {
                if ((this.type == "select-one" || this.type == "select-multiple")) {
                    for (var x = 0; x < this.length; x++) {
                        if (this.options[x].selected != this.options[x].defaultSelected) {
                            hasChanges = true;
                       }
                    }
                }
            }
        }
    });

    return hasChanges;
}

EDIT:

Even the above code will have problem; because once we set it to true, even if the fields in the below query are not changed we are not setting it to false. You need to use this one:

function getHasChanges() {
            var hasChanges = false;

            $(":input:not(:button):not([type=hidden])").each(function () {
                if ((this.type == "text" || this.type == "textarea" || this.type == "hidden")) {
                    if(this.defaultValue != this.value) {
                        hasChanges = true;
                    } else {
                        hasChanges = false;
                    }
                    return hasChanges;
                 } else {
                    if ((this.type == "radio" || this.type == "checkbox")) {
                        if(this.defaultChecked != this.checked) {
                            hasChanges = true;
                        } else {
                            hasChanges = false;
                        }
                     }
                     return hasChanges;
                    else 
                    {
                        if ((this.type == "select-one" || this.type == "select-multiple")) {
                            for (var x = 0; x < this.length; x++) {
                                if (this.options[x].selected != this.options[x].defaultSelected) {
                                    hasChanges = true;
                                }
                            }
                        }
                        return hasChanges;
                    }
                }
            });

            return hasChanges;
    }

Hope this helps 🙂

Missed a bracket. Please check this:

function getHasChanges() {
    var hasChanges = false;
    $(":input:not(:button):not([type=hidden])").each(function () {
        if ((this.type == "text" || this.type == "textarea" || this.type == "hidden")) {
            if(this.defaultValue != this.value) {
                hasChanges = true;
            } else {
                hasChanges = false;
            }
            return hasChanges;
         } else if ((this.type == "radio" || this.type == "checkbox")) {
                if(this.defaultChecked != this.checked) {
                    hasChanges = true;
                } else {
                    hasChanges = false;
                }
             return hasChanges;
         } else if (this.type == "select-one" || this.type == "select-multiple") {
                for (var x = 0; x < this.length; x++) {
                    if (this.options[x].selected != this.options[x].defaultSelected) {
                        hasChanges = true;
                    }
                }
                return hasChanges;
         }
    });
    return hasChanges;
}