Does jQuery change() work with hidden form elements

Ankur picture Ankur · Jul 16, 2011 · Viewed 7k times · Source

I have a map in a popup window. I want to pass values (coordinates) from that back to my main window and have a method triggered once the coordinates are changed.

In my main window I have this event handler

$(".spatial").change
    (    function ()
        {
            alert('Handler for .change() called.');
        }
    );

For some reason the alert() is not being called, when this form is getting changed (the value attribute gets changed).

<form action="#" id="spatial_points" class="spatial">
    <input type="hidden" id="start_point" class="spatial" value=""/>
    <input type="hidden" id="end_point" class="spatial" value=""/>
</form>

I know that change() only works on form fields. I am wondering whether this extends to the hidden form field?

This is what the above code looks like once a map selection has been made:

<form id="spatial_points" class="spatial" action="#">
    <input id="start_point" class="spatial" type="hidden" value="(-7.9091601975133266, 127.0170435)">
     <input id="end_point" class="spatial" type="hidden" value="(-44.73273833806611, 154.790481)">
</form>

Answer

Felix Kling picture Felix Kling · Jul 16, 2011

The change event is not triggered when changing the value via JavaScript. And as this is the only way to change a hidden field, such an event won't be generated.

You can, however, trigger the event handler manually once you changed the value:

$(".spatial").val(something).change();