hidden input change event

Question

How can I detect a change of the value of a hidden input? I've already tried these approaches without success:

$('#id_inpout').live('change',function () {
        var id_el = $(this).attr('id');
        alert(id_el);
    });

and

$('#id_inpout').change(function () {
        var id_el = $(this).attr('id');
        alert(id_el);
    });

and

$('#id_inpout').bind('change',function () {
        var id_el = $(this).attr('id');
        alert(id_el);
    });

Aubarta

duplicate ? #6533587 – Estafette

But none of the answers of the other question is acceptable... Even the upvoted one involve to call the triggering explicitly... – Psychomancy

What about this answer ? #1003553 – Farika

What you are changing,and what is the id of hidden input..??give us the VIEW – Supernaturalism

A hidden input has to be "manually" changed (as opposed to having its value changed via user interaction) anyway, why would you need this event? You could always execute a function at the same time you change the input. – Munger

Hidden inputs don't trigger the change event. You need to set the value and then call the change event handler manually. – Ideal

change is not manually, I have autocomplete input when it changes the hidden input value change automatically, I can't recover value – Aubarta

Answer 1

As was said in duplicates, and as you saw, changes done in javascript don't trigger the change event.

As I didn't find acceptable answers in the duplicates (that is answers not involving a change in the way the hidden value is set), and supposing you really need that (that is you can't call your function when you change the hidden input val), here's what you might do :

function survey(selector, callback) {
   var input = $(selector);
   var oldvalue = input.val();
   setInterval(function(){
      if (input.val()!=oldvalue){
          oldvalue = input.val();
          callback();
      }
   }, 100);
}
survey('#id_inpout', function(){console.log('changed')}); 

But I would preferably use a more direct solutions (i.e. call a function when you change the hidden input value). This function might be a simple event dispatcher of your own (basically an object wrapping a list of functions to call when it's called).

EDIT: It's now 2015 and for people wondering, no, none of the recent advances of the web world solve that problem. Mutation observers don't observe the value property of the input (it's not really the DOM) and ES6 object observer are powerless for those native objects too.

Mccandless

thak's for all, I'll use the survey function – Aubarta

It seems that with Mutation observer it works : https://mcmap.net/q/82254/-jquery-detect-value-change-on-hidden-input-field – Kolivas

Answer 2

You could also use trigger('change') after you assign new value to the hidden input:

$('#hidden_input').val('new_value').trigger('change');

Mytilene

+1 Excellent! Just what I needed. Now why didn't I think of that? – Fascinating

you can also use $('#hidden_input').val('new_value').change(); – Whichever