jQuery event on value change of input hidden

Question

I have this input hidden:

<input id="j_idt26:myValue" type="hidden" name="j_idt26:myValue" value="0?100?">

I want to alert "hey" the first time the value is set and then every time it changes.

I have something like this:

$(document).ready(function(){
    var $hello= $('[id$=myValue]');

    $hello.bind("change load", function(){
        alert('hey');
    });
});

But nothing is showing up.
If you can help
Thanks

I am using JQuery 1.8.3. It's a JSF Java application so it's programatically. — Loric, Jul 17 '13 at 09:10
Also see this broader question: http://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery?lq=1 — Andrew Shepherd, Mar 07 '14 at 00:24
Possible duplicate of [jQuery - Detect value change on hidden input field](http://stackoverflow.com/questions/6533087/jquery-detect-value-change-on-hidden-input-field) — Jacob G, Jul 01 '16 at 00:31

score 19 · Accepted Answer · answered Jul 17 '13 at 09:00

$(function(){
    var $hello= $('[id$="myValue"]');

    $hello.on("change", function(){ //bind() for older jquery version
        alert('hey');
    }).triggerHandler('change'); //could be change() or trigger('change')
});

Then, each time you change the value of targeted hidden inputs, trigger handler, e.g:

$('#j_idt26:myValue').val('0?200?').triggerHandler('change');

That's because onchange event is not fired automatically changing its value programatically.

Thanks! That's the answer, because I was changing the value programmatically ;) — Loric, Jul 17 '13 at 09:10

Kevin Bowersox · Answer 2 · 2013-07-17T09:08:24.767

The change event is fired after the blur event on an input, in other words when the input loses focus. The MDN documentation describes this:

When the element loses focus after its value was changed, but not commited (e.g. after editing the value of or ).

Since the input is of type hidden there will never be any user interaction with the input meaning it will not change unless the client side script provided by your site changes it, which will not trigger the change event.

Here are two options:

Call change() explicitly

Whenever you modify the value of the hidden input call .change() to trigger the event.

$(document).ready(function(){
    var $hello= $('[id$=myValue]');

    $hello.on("change", function(){
        alert('hey');
    });

    $hello.val("Something");
    $hello.change();
});

Just call the code without the handler

Instead of using the event handler just execute the code you would have within the source.

$(document).ready(function(){
    var $hello= $('[id$=myValue]');
    $hello.val("Something");
    alert('hey');
});

Another thing I would like to mention is the selector can be scoped a little better.

    var $hello= $('input[id$=myValue]');

And if your using a new version of jQuery prefer on instead of bind as shown in the above example.

score 1 · Answer 3 · answered Jun 05 '14 at 14:19

1

It is very easy :

$('#my_id').val(myValue).trigger('change');

Then you can detect change value on $('#my_id')

answered Jun 05 '14 at 14:19

Rémi P

421
5
11

score 0 · Answer 4 · answered Jul 17 '13 at 08:56

0

You can try this code :

$(function(){
    var $hello = $('[id$="myValue"]');

    $hello.bind("change load", function(){
        alert('hey');
    });
});

answered Jul 17 '13 at 08:56

Lucas Willems

6,673
4
28
45

jQuery event on value change of input hidden

4 Answers4

Linked