jQuery - Detect value change on hidden input field

jquery event-handling field onchange hidden
Ben picture Ben · Jun 30, 2011 · Viewed 279.8k times · Source

I have a hidden text field whose value gets updated via an AJAX response.

<input type="hidden" value="" name="userid" id="useid" />

When this value changes, I would like to fire an AJAX request. Can anyone advise on how to detect the change?

I have the following code, but do not know how to look for the value:

$('#userid').change( function() {  
    alert('Change!'); 
})

Answer

yycroman picture yycroman · Jan 23, 2012

So this is way late, but I've discovered an answer, in case it becomes useful to anyone who comes across this thread.

Changes in value to hidden elements don't automatically fire the .change() event. So, wherever it is that you're setting that value, you also have to tell jQuery to trigger it. 

function setUserID(myValue) {
     $('#userid').val(myValue)
                 .trigger('change');
}

Once that's the case, 

$('#userid').change(function(){
      //fire your ajax call  
})

should work as expected.

Related questions

jQuery checkbox change and click event

Here .change() updates the textbox value with the checkbox status. I use .click() to confirm the action on uncheck. If the user selects cancel, the checkmark is restored but .change() fires before confirmation. This leaves things in an inconsistent state …

Read More
jQuery checkbox checked state changed event

I want an event to fire client side when a checkbox is checked / unchecked: $('.checkbox').click(function() { if ($(this).is(':checked')) { // Do stuff } }); Basically I want it to happen for every checkbox on the page. Is this method …

Read More
event.preventDefault() vs. return false

When I want to prevent other event handlers from executing after a certain event is fired, I can use one of two techniques. I'll use jQuery in the examples, but this applies to plain-JS as well: 1. event.preventDefault() $('a').click(…

Read More