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

duplicate ? http://stackoverflow.com/questions/6533087/jquery-detect-value-change-on-hidden-input-field — max4ever, Sep 25 '12 at 10:11
But none of the answers of the other question is acceptable... Even the upvoted one involve to call the triggering explicitly... — Denys Séguret, Sep 25 '12 at 10:12
What about this answer ? http://stackoverflow.com/questions/1003053/does-html-hidden-control-have-any-events-like-onchange-or-something — palmplam, Sep 25 '12 at 10:14
What you are changing,and what is the id of hidden input..??give us the VIEW — GautamD31, Sep 25 '12 at 10:15
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. — Dutchie432, Sep 25 '12 at 10:15
Hidden inputs don't trigger the change event. You need to set the value and then call the change event handler manually. — Reinstate Monica Cellio, Sep 25 '12 at 10:19
change is not manually, I have autocomplete input when it changes the hidden input value change automatically, I can't recover value — chokrijobs, Sep 25 '12 at 10:22

score 73 · Answer 1 · edited Jul 04 '14 at 08:29

73

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

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

edited Jul 04 '14 at 08:29

Ciro Santilli OurBigBook.com

347,512
102
1,199
985

answered Feb 12 '13 at 14:33

Alex

731
1
7
8

1

+1 Excellent! Just what I needed. Now why didn't I think of that? – GreatSeaSpider May 23 '13 at 13:20
9

you can also use $('#hidden_input').val('new_value').change(); – Mudaser Ali Dec 25 '13 at 10:38

Denys Séguret · Accepted Answer · 2015-07-01T07:04:32.513

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.

It seems that with Mutation observer it works : http://stackoverflow.com/a/31719339/2418749 — Florian HENRY - Scopen, Oct 24 '15 at 10:05

hidden input change event

2 Answers2

Linked