jQuery .val() not working with jQueryUI autocomplete -

i've got 2 jqueryui autocomplete's on single form. 1 feeds off other. goal have first field autocomplete , populate ids (intended be) hidden fields. second autocomplete doing ajax call remote page, passing id first autocomplete.

this working. first autocomplete works fine, , populates companyid field appropriate value.

my problem second autocomplete passing value of 0 ajax requested page. it's if .val() returned call source in second autocomplete not reading value of companyid field properly.

to make things more maddening, i'm calling alert() when community field changes, , it's reporting proper, accurate companyid! argh!

my jquery:

<script>     $(document).ready(function() {         var companies = [             { label: 'america first properties', value: '6' },             { label: 'western national group', value: '7' },             { label: 'greystar property management', value: '8' },         ]          $('#company').autocomplete({             autofocus:  true,             delay:      0,             minlength:  2,             source:     companies,             select:     function(event,ui) {                             $('#companyid').val(ui.item.value);                             $('#company').val(ui.item.label);                             $('#community').val('');                             return false;                         },             change:     function(event,ui) {                         }         });          $('#community').autocomplete({             autofocus:  true,             delay:      200,             minlength:  2,             select:     function(event,ui) {                             $('#communityid').val(ui.item.value);                             $('#community').val(ui.item.label);                             return false;                         },             change:     function(event,ui) {                             alert("the value of company id field is: " + $('#companyid').val());                         },             source:     '/community/ajax_getcommunities.cfm?companyid=' + $('#companyid').val()         });     }); </script> 

and html:

<form name="addcommunityform" id="addcommunityform" action="act_addcommunity.cfm" method="post">         <fieldset>         <label>intended hidden fields:</label>         <label>companyid:</label>         <input type="text" name="companyid" id="companyid" value="0">         <label>communityid:</label>         <input type="text" name="communityid" id="communityid" value="0">     </fieldset>      <fieldset>         <label for="company">property management company:</label>         <input type="text" name="company" id="company" value="">     </fieldset>      <fieldset>         <label for="community">community name:</label>         <input type="text" name="community" id="community" value="">     </fieldset> </form> 

anyone have ideas on why .val() isn't working?

you need use function instead of string source autocomplete:

$('#community').autocomplete({     autofocus: true,     delay: 200,     minlength: 2,     select: function(event,ui) {         $('#communityid').val(ui.item.value);         $('#community').val(ui.item.label);         return false;     },     change: function(event,ui) {         alert("the value of company id field is: " + $('#companyid').val());     },     source: function (request, response) {         $.ajax({             url: '/community/ajax_getcommunities.cfm?companyid=' + $('#companyid').val(),             data: request,             success: response,             error: function () {                 response([]);             },             datatype: 'json'         });     } }); 

since #companyid's value changing, selecting once when #community autocomplete initialized not going work. supplying function source enables requery dom company id each time request made.