Using jQuery, how can I find if a form has changed? [duplicate]

Answer 1

The approach I usually take in such a case is that I check serialized form value. So the idea is that you calculate initial form state with $.fn.serialize method. Then when needed you just compare current state with the original serialized string.

To target all input elements (select, textarea, checkbox, input-text, etc.) within a form you can use pseudo selector :input.

For example:

var $form = $('form'),
    origForm = $form.serialize();

$('form :input').on('change input', function() {
    $('.change-message').toggle($form.serialize() !== origForm);
});

.change-message {
    display: none;
}

    
You have unsaved changes.
    

        
    
    
Username: 
     

        Type: 
        
            Option 1
            Option 2
            Option 3
        
    
    

        Status:  1
         2