jQuery - Détecter le changement de valeur d'un champ de saisie caché

Question

J'ai un champ de texte caché dont la valeur est mise à jour via une réponse AJAX.

<input type="hidden" value="" name="userid" id="useid" />

Lorsque cette valeur change, je voudrais déclencher une requête AJAX. Quelqu'un peut-il me conseiller sur la manière de détecter le changement ?

J'ai le code suivant, mais je ne sais pas comment chercher la valeur :

$('#userid').change( function() {  
    alert('Change!'); 
})

Answer 1

Il est possible d'utiliser Object.defineProperty() afin de redéfinir la propriété "value" de l'élément d'entrée et de faire quoi que ce soit pendant sa modification.

Object.defineProperty() nous permet de définir un getter et un setter pour une propriété, et donc de la contrôler.

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/

Answer 2

Cet exemple renvoie la valeur du champ brouillon chaque fois que le champ brouillon caché change de valeur (navigateur chrome) :

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  });

       }
  };
})();

Answer 3

Bien que ce fil de discussion date de 3 ans, voici ma 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");
    });
}

Answer 4

Juste faire

  $('#userid').live('change', function() {  
            alert('Change!'); 
        });

il liera l'événement avec votre élément dynamique ajouté