jQuery - Detect value change on hidden input field

Question

I have a hidden text field whose value gets updated via an AJAX response    lt input type  hidden  value    name  userid  id  useid    gt    When this value changes  I would like to fire an AJAX request  Can anyone advise on how to detect the change   I have the following code  but do not know how to look for the value       userid   change  function           alert  Change

User · Answer

It is possible to use Object defineProperty   in order to redefine the  value  property of the input element and do anything during its changing   Object defineProperty   allows us to define a getter and setter for a property  thus controlling it   replaceWithWrapper     hid1   0    value   function obj  property  value       console log  new value    value       function replaceWithWrapper obj  property  callback      Object defineProperty obj  property  new function         var  value   obj property       return         set  function value             value   value          callback obj  property  value                 get  function             return  value                             hid1   val 4     https   jsfiddle net bvvmhvfk

User · Answer

Building off of Viktar s answer  here s an implementation you can call once on a given hidden input element to ensure that subsequent change events get fired whenever the value of the input element changes         Modifies the provided hidden input so value changes to trigger events        After this method is called  any changes to the  value  property of the    specified input will trigger a  change  event  just like would happen    if the input was a text field        As explained in the following SO post  hidden inputs don t normally    trigger on-change events because the  blur  event is responsible for    triggering a change event  and hidden inputs aren t focusable by virtue    of being hidden elements     https   stackoverflow com a 17695525 4342230        param  HTMLInputElement  inputElement      The DOM element for the hidden input element      function setupHiddenInputChangeListener inputElement      const propertyName    value      const  get  originalGetter  set  originalSetter        findPropertyDescriptor inputElement  propertyName         We wrap this in a function factory to bind the getter and setter values      so later callbacks refer to the correct object  in case we use this      method on more than one hidden input element    const newPropertyDescriptor      originalGetter   originalSetter    gt        return         set  function value            const currentValue   originalGetter call inputElement               Delegate the call to the original property setter          originalSetter call inputElement  value               Only fire change if the value actually changed          if  currentValue     value              inputElement dispatchEvent new Event  change                               get  function                Delegate the call to the original property getter         return  originalGetter call inputElement                      originalGetter  originalSetter      Object defineProperty inputElement  propertyName  newPropertyDescriptor              Search the inheritance tree of an object for a property descriptor        The property descriptor defined nearest in the inheritance hierarchy to    the class of the given object is returned first        Credit for this approach     https   stackoverflow com a 38802602 4342230        param  Object  object     param  String  propertyName      The name of the property for which a descriptor is desired         returns  PropertyDescriptor  null      function findPropertyDescriptor object  propertyName      if  object     null        return null         if  object hasOwnProperty propertyName         return Object getOwnPropertyDescriptor object  propertyName         else       const parentClass   Object getPrototypeOf object        return findPropertyDescriptor parentClass  propertyName          Call this on document ready like so    document  ready function       setupHiddenInputChangeListener    myinput   0

User · Answer

So this is way late  but I ve discovered an answer  in case it becomes useful to anyone who comes across this thread   Changes in value to hidden elements don t automatically fire the  change   event  So  wherever it is that you re setting that value  you also have to tell jQuery to trigger it    function setUserID myValue             userid   val myValue                    trigger  change        Once that s the case        userid   change function            fire your ajax call        should work as expected

User · Answer

This example returns the draft field value every time the hidden draft field changes its value  chrome browser    var h   document querySelectorAll  input type  hidden   name  draft     0     or jquery        var h      input type  hidden   name  draft     0    observeDOM h   n   function draftValue      console log  dom changed draftValue   draftValue         var observeDOM    function    var MutationObserver   window MutationObserver     window WebKitMutationObserver     return function obj  thistime  callback       if typeof obj      undefined          console log  obj is undefined          return             if  MutationObserver                define a new observer         var obs   new MutationObserver function mutations  observer                if  mutations 0  addedNodes length    mutations 0  removedNodes length                    callback  pass other observations back                     else if mutations 0  attributeName     value                        use callback to pass back value of hidden form field                                            callback  obj value                                            have the observer observe obj for changes in children            note  attributes true  else we can t read the input attribute value         obs observe  obj    childList true  subtree true  attributes true

User · Answer

You can simply use the below function  You can also change the type element       input type hidden    bind  change   function            alert   this  val             Changes in value to hidden elements don t automatically fire the  change   event  So  wherever it is that you re setting that value  you also have to tell jQuery to trigger it   HTML      lt div id  message  gt  lt  div gt   lt input type  hidden  id  testChange  value  0     gt        JAVASCRIPT  var  message       message    var  testChange       testChange    var i   1   function updateChange          message html  message html       lt p gt Changed to      testChange val       lt  p gt         testChange on  change   updateChange    setInterval function          testChange val   i  trigger  change          console log  value changed    testChange val        3000    updateChange      should work as expected   http   jsfiddle net 7CM6k 3

User · Answer

Since hidden input does not trigger  change  event on change  I used MutationObserver to trigger this instead    Sometimes hidden input value changes are done by some other scripts you can t modify   This does not work in IE10 and below  MutationObserver   window MutationObserver    window WebKitMutationObserver   var trackChange   function element      var observer   new MutationObserver function mutations  observer        if mutations 0  attributeName     value               element  trigger  change                  observer observe element        attributes  true             Just pass an element to the function to start tracking trackChange     input name foo    0

User · Answer

userid   change function        fire your ajax call            userid   val 10  change

User · Answer

Although this thread is 3 years old  here is my solution     function          keep fields uptodate         function keep fields uptodate            Keep all fields up to date      var  inputDate      input type  date           inputDate blur function event                   input   trigger  change

[jquery] jQuery - Detect value change on hidden input field

Examples related to jquery

Examples related to event-handling

Examples related to field

Examples related to onchange

Examples related to hidden