jQuery check if HTML form has changed

Question

After very useful advices and tips found here I came up with this snippet.

I would like to check if form fields were changed. If true, show an alert icon with a tooltip in page top, if false or returned to field default value, hide the alert icon. With this script I could accomplish it, but I would like to know if this is the proper way and if it could be improved. Newbie here :)

In addition to what already made I also would like to mark the field that was changed (example: change the field label class).

$(':input').on('keyup keydown blur change', function () {  
    var isDirty = false; 

    $(':input').each(function () {
        var $e = $(this);

        if($e.is(':input[type=radio]') && $e.prop('defaultChecked') != $e.prop('checked')) {
            isDirty = true;

        } else if($e.is('select') && !this.options[this.selectedIndex].defaultSelected) {
            isDirty = true;

        } else if($e.is(':input[type=text], :input[type=url], :input[type=email], textarea') && $e.prop('defaultValue') != $e.val()) {
            isDirty = true;
        }

        if(isDirty == true){    
            $("#toolbar-warning span").attr({
                'class': 'btn active hasTooltip icon-warning-2', 
                'data-original-title': 'has changes!'
            });

        } else {
            $("#toolbar-warning span").attr({
                'class': 'btn hasTooltip icon-warning-2', 
                'data-original-title': ''
            });                 
        } 

    })
});

You are attaching the event handlers to all input fields already, so there should be no need to check the value of each field on every call – checking the value of the current field that the event was triggered upon should be enough. — C3roe
– C3roe, Commented May 30, 2015 at 15:47
@CBroe Thanks. If I don't use each and for example I changed 2 fields values and after return one of those fields to it's default value the 'has changes!' warning disappears, and it still has one field changed. — n.h.
– n.h., Commented May 30, 2015 at 16:03
The event will fire for each input field change – so each of those will be handled by your function individually. — C3roe
– C3roe, Commented May 30, 2015 at 16:10

Georgios Dimitriadis · Accepted Answer · 2015-05-30 15:59:07Z

3

Since you already use jQuery, try this

1) To check if the form has changed use .serialize():

var defaultForm = $unchangedForm.serialize();

function checkIfFormChanged($form) {
    if(defaultForm !== $form.serialize())
        return true;
    else
        return false;
    // You can also use a one-liner: return !(defaultForm !== $form.serialize())
}

2) To check if the default value of an element has changed, add a change() selector on each element you wish to check;

// This applies only to all the input elements
// Save the default values of elements in an array. Do this for every input element

var defaultValue[$myElem.attr('id')] = $myElem.val();
// more here

$('input').change(function(){
    if(defaultValue[$(this).attr('id')] !== $(this).val()) // Value has changed
        $(this).addClass('changedClass');
    else 
        $(this).removeClass('changedClass');
});

answered May 30, 2015 at 15:59

Georgios Dimitriadis

6856 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Georgios Dimitriadis Over a year ago

Note I haven't tested this code, so you might have to tweak it a little bit!

Nikos M. · Accepted Answer · 2015-05-30 16:02:10Z

1

try this (hint, modify as needed):

before any user interaction, setup form

$('form input, form select, form textarea').each(function(){ this.backup = this.value; });
$('form').on('change keyup', 'input,select,textarea', function(){
   if (this.value !== this.backup)
   {
      this.backup = this.value;
      this.form.isDirty = true;
      $(this).addClass('field-dirty');
      $(this.form).addClass('form-dirty');
   }
});

Note you need a way to rest form.isDirty after some user interaction, or maybe user clicks a reset button e.g

$('form').on('click', '[type="reset"]', function(){
   $('form input, form select, form textarea').each(function(){ this.backup = this.value; this.form.isDirty = false; });
});

answered May 30, 2015 at 16:02

Nikos M.

8,3934 gold badges41 silver badges45 bronze badges

Collectives™ on Stack Overflow

jQuery check if HTML form has changed

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related