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

But none of the answers of the other question is acceptable... Even the upvoted one involve to call the triggering explicitly... — Denys Séguret
– Denys Séguret, Commented Sep 25, 2012 at 10:12
What about this answer ? stackoverflow.com/questions/1003053/… — palmplam
– palmplam, Commented Sep 25, 2012 at 10:14
What you are changing,and what is the id of hidden input..??give us the VIEW — GautamD31
– GautamD31, Commented Sep 25, 2012 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
– Dutchie432, Commented Sep 25, 2012 at 10:15

Ciro Santilli OurBigBook.com · Accepted Answer · 2014-07-04 08:29:52Z

72

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

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

edited Jul 4, 2014 at 8:29

Ciro Santilli OurBigBook.com

393k120 gold badges1.3k silver badges1.1k bronze badges

answered Feb 12, 2013 at 14:33

Alex

7211 gold badge7 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GreatSeaSpider Over a year ago

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

Mudaser Ali Over a year ago

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

Denys Séguret · Accepted Answer · 2015-07-01 07:04:32Z

27

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.

edited Jul 1, 2015 at 7:04

answered Sep 25, 2012 at 10:18

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

2 Comments

chokrijobs Over a year ago

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

Florian HENRY - Scopen Over a year ago

It seems that with Mutation observer it works : stackoverflow.com/a/31719339/2418749

Collectives™ on Stack Overflow

hidden input change event

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related