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

Answer 1

$(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.

Answer 2

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.