jQuery check if HTML form has changed -


after useful advices , tips found here came snippet.

i check if form fields changed. if true, show alert icon tooltip in page top, if false or returned field default value, hide alert icon. script accomplish it, know if proper way , if improved. newbie here :)

in addition made mark field changed (example: change 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': ''             });                          }       }) }); 

since use jquery, try this

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

var defaultform = $unchangedform.serialize();  function checkifformchanged($form) {     if(defaultform !== $form.serialize())         return true;     else         return false;     // can use one-liner: return !(defaultform !== $form.serialize()) } 

2) check if default value of element has changed, add change() selector on each element wish check;

// applies input elements // save default values of elements in array. 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'); }); 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -