web-dev-qa-db-fra.com

jQuery - Détecte le changement de valeur dans un champ de saisie masqué

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

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

Lorsque cette valeur change, je souhaite déclencher une demande AJAX. Quelqu'un peut-il conseiller sur la façon de détecter le changement?

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

$('#userid').change( function() {  
    alert('Change!'); 
})
jqueryevent-handlingfieldonchangehidden
231
Ben

C'est donc très tard, mais j'ai découvert une réponse, au cas où cela deviendrait utile à quiconque se heurterait à ce fil.

Les modifications de valeur apportées aux éléments masqués ne déclenchent pas automatiquement l'événement .change (). Ainsi, quelle que soit la définition de cette valeur, vous devez également indiquer à jQuery de la déclencher. 

function setUserID(myValue) {
     $('#userid').val(myValue)
                 .trigger('change');
}

Une fois que c'est le cas, 

$('#userid').change(function(){
      //fire your ajax call  
})

devrait fonctionner comme prévu.

562
yycroman

Etant donné que les entrées masquées ne déclenchent pas d’événement "change", j’ai utilisé MutationObserver pour le déclencher.

(Parfois, les modifications de valeur d'entrée masquées sont effectuées par d'autres scripts que vous ne pouvez pas modifier)

Cela ne fonctionne pas dans IE10 et moins

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] );
20
lulalala

Vous pouvez simplement utiliser la fonction ci-dessous, vous pouvez également changer l'élément type.

 $("input[type=hidden]").bind("change", function() {
       alert($(this).val()); 
 });

Les modifications de valeur apportées aux éléments masqués ne déclenchent pas automatiquement l'événement .change (). Ainsi, quelle que soit la définition de cette valeur, vous devez également indiquer à jQuery de la déclencher.

HTML 

 <div id="message"></div>
<input type="hidden" id="testChange" value="0"  />

JAVASCRIPT

var $message = $('#message');
var $testChange = $('#testChange');
var i = 1;

function updateChange() {
    $message.html($message.html() + '<p>Changed to ' + $testChange.val() + '</p>');
}

$testChange.on('change', updateChange);

setInterval(function() {
    $testChange.val(++i).trigger('change');; 
    console.log("value changed" +$testChange.val());
}, 3000);

updateChange();

devrait fonctionner comme prévu.

http://jsfiddle.net/7CM6k/3/

9
Tarun Gupta

Il est possible d'utiliser Object.defineProperty() afin de redéfinir la propriété 'value' de l'élément input et de ne rien faire lors de sa modification.

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

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/

4
Viktar Tserashchuk
$('#userid').change(function(){
  //fire your ajax call  
});

$('#userid').val(10).change();
2
Digambar Patil

Cet exemple renvoie la valeur du champ de brouillon chaque fois que le champ de brouillon masqué 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  });

       }
  };
})();
0
user2677034