Question

I have a page that contains a HiddenField control, I register some javascript on page load which contains a function I want to run when the HiddenField value has changed.

Currently, I have the following code which executes the function if an input field’s value has changed:

$(':input').change(function(){ pageHasBeenUpdated = true;  });

What javascript would I need to set pageHasBeenUpdated = true if the value of the HiddenField control has been updated?

Answer 1

You can access the hidden input elements by specifying it in an attribute selector:

$('input[type=hidden]')

Since the change event isn’t triggered when you update the value of a hidden input field you’ll need to fire it yourself when you update the value of the input.

Example:

Html

<input type="hidden" id="myHiddenInput">
<button id="valueChanger">Change hidden input value</button>

jQuery

$('input[type=hidden]').change(function(){alert($(this).val())});

$('#valueChanger').click(function(){
    $('#myHiddenInput').val("Hello World").trigger('change');
 }); 

Working Example