How do you handle a form change in jQuery

Question

In jQuery  is there a simple way to test if ANY of a form s elements have changed   EDIT  I should have added that I only need to check on a click   event   EDIT  Sorry I really should have been more specific  Say I have a form and I have a button with the following       mybutton   click function          Here is where is need to test   if    FORM has changed               Do something           How would I test if the form has changed since it was loaded

User · Answer

Extending Udi s answer  this only checks on form submission  not on every input change     document  ready  function        var form data       myform   serialize          myform   submit function            if   form data      this  serialize               alert  no change            else           alert  change

User · Answer

You need jQuery Form Observe plugin  That s what you are looking for

User · Answer

If you want to check if the form data  as it is going to be sent to the server  have changed  you can serialize the form data on page load and compare it to the current form data     function          var form original data       myform   serialize              mybutton   click function             if      myform   serialize      form original data                   Something changed

User · Answer

var formStr   JSON stringify     form   serializeArray         function Submit       var newformStr   JSON stringify     form   serializeArray        if  formStr    newformStr                      formChangedfunct                      else                      formUnchangedfunct

User · Answer

Try this    lt script gt  var form original data      form   serialize     var form submit false      type  submit     click function         form submit true      window onbeforeunload   function           console log    form   submit         if     form   serialize      form original data  amp  amp  form submit  false            return  Do you really want to leave without saving              lt  script gt

User · Answer

A real time and simple solution      form   on  keyup change paste    input  select  textarea   function        console log  Form changed

User · Answer

x000D   x000D     form name  your form name   input  form name  your form name   select   click function     x000D        result   html   this  val     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt h2 gt Form  your form name  lt  h2 gt  x000D   lt form name  your form name  gt  x000D     lt input type  text  name  one a  id  one a  value  AAAAAAAA    gt  x000D     lt input type  text  name  one b  id  one b  value  BBBBBBBB    gt  x000D     lt input type  text  name  one c  id  one c  value  CCCCCCCC    gt  x000D     lt select name  one d  gt  x000D       lt option value  111111  gt 111111 lt  option gt  x000D       lt option value  222222  gt 222222 lt  option gt  x000D       lt option value  333333  gt 333333 lt  option gt  x000D     lt  select gt  x000D   lt  form gt  x000D   lt hr  gt  x000D   lt h2 gt Form  your other form name  lt  h2 gt  x000D   lt form name  your other form name  gt  x000D     lt input type  text  name  two a  id  two a  value  DDDDDDDD    gt  x000D     lt input type  text  name  two b  id  two b  value  EEEEEEEE    gt  x000D     lt input type  text  name  two c  id  two c  value  FFFFFFFF    gt  x000D     lt input type  text  name  two d  id  two d  value  GGGGGGGG    gt  x000D     lt input type  text  name  two e  id  two f  value  HHHHHHHH    gt  x000D     lt input type  text  name  two f  id  two e  value  IIIIIIII    gt  x000D     lt select name  two g  gt  x000D       lt option value  444444  gt 444444 lt  option gt  x000D       lt option value  555555  gt 555555 lt  option gt  x000D       lt option value  666666  gt 666666 lt  option gt  x000D     lt  select gt  x000D   lt  form gt  x000D   lt h2 gt Result lt  h2 gt  x000D   lt div id  result  gt  x000D     lt h2 gt Click on a field   lt  h2 gt  x000D   lt  div gt  x000D   x000D   x000D    In addition to above  JoeD s answer   If you want to target fields in a particular form  assuming there are more than one forms  than just fields  you can use the following code      form name  your form name   input  form name  your form name   select   click function            A form element was clicked

User · Answer

You can do this      form  input   change function         this  closest  form   data  changed   true           mybutton   click function       if   this  closest  form   data  changed             do something           This rigs a change event handler to inputs in the form  if any of them change it uses  data   to set a changed value to true  then we just check for that value on the click  this assumes that  mybutton is inside the form  if not just replace   this  closest  form   with     myForm     but you could make it even more generic  like this       checkChangedbutton   click function       if   this  closest  form   data  changed             do something           References  Updated  According to jQuery this is a filter to select all form controls   http   api jquery com input-selector      The  input selector basically selects all form controls

User · Answer

Here is an elegant solution   There is hidden property for each input element on the form that you can use to determine whether or not the value was changed  Each type of input has it s own property name  For example   for text textarea it s defaultValue for select it s defaultSelect for checkbox radio it s defaultChecked   Here is the example   function bindFormChange  form       function touchButtons         var       changed objects              observable buttons    form find  input type  submit    button type  submit    button data-object  reset-form           changed objects      input text  input checkbox  input radio  textarea  select    form  map function            var          input     this           changed   false         if   input is  input text       input is  textarea               changed      input  prop  defaultValue       input val                   if   changed  amp  amp   input is  select               changed       option selected    input  prop  defaultSelected                  if   changed  amp  amp   input is  input checkbox       input is  input radio               changed      input  prop  defaultChecked       input is   checked                   if  changed            return  input attr  id                    toArray         if  changed objects length           observable buttons removeAttr  disabled            else          observable buttons attr  disabled    disabled                 touchButtons          input  textarea  select    form  each function          var  input     this         input on  keyup change   function            touchButtons                        Now just loop thru the forms on the page and you should see submit buttons disabled by default and they will be activated ONLY if you indeed will change some input value on the form      form   each function          bindFormChange   this          Implementation as a jQuery plugin is here https   github com kulbida jmodifiable

User · Answer

You can use multiple selectors to attach a callback to the change event for any form element      input  select   change function           Something changed       EDIT  Since you mentioned you only need this for a click  you can simply modify my original code to this      input  select   click function           A form element was clicked       EDIT  2  Ok  you can set a global that is set once something has been changed like this   var FORM HAS CHANGED   false       mybutton   click function         if  FORM HAS CHANGED               The form has changed               input  select   change function        FORM HAS CHANGED   true

User · Answer

form  input   change function            Something has changed

User · Answer

Looking at the updated question try something like     input  textarea  select   each function          this  data  val     this  val             button   click function            input  textarea  select   each function            if   this  data  val       this  val    alert  Things Changed                  For the original question use something like     input   change function         alert  Things have changed

User · Answer

First  I d add a hidden input to your form to track the state of the form   Then  I d use this jQuery snippet to set the value of the hidden input when something on the form changes          form        find  input        change function            if      hdnFormChanged   val       no                             hdnFormChanged   val  yes                        When your button is clicked  you can check the state of your hidden input       Button   click function        if     hdnFormChanged   val       yes                    handler code here

[javascript] How do you handle a form change in jQuery?

Examples related to javascript

Examples related to jquery