javascript - Update form field based upon another form field -

i have form field, called customer. have 2nd form field called "gatecode". want able select customer(which works right via autocomplete script), , upon select of existing customer, auto-populate corresponding "gatecode" customer. possible?

right happens 2nd form field blank upon load, , overwrites "gatecode" whenever form saved.

corresponding customer code :

<input data-type="customername" value="<?php echo isset($invoice['client']['customername']) ? $invoice['client']['customername']: ''; ?>"  type="text" class="form-control" id="clientcompanyname" placeholder="company name"> 

gate code

  <input type="text" class="form-control" id="customer_gatecode_modal" name="customer_gatecode_modal" placeholder="gate code"> 

current jquery code :

$('#clientcompanyname').autocomplete({     source: function( request, response ) {         $.ajax({             url : 'ajax.php',             datatype: "json",             method: 'post',             data: {                 name_startswith: request.term,                 type: 'customername'             },             success: function( data ) {                  if(!data.length){                     var result = [                       {                           label: 'no client found',                            value: ''                       }                     ];                     response(result);                 }else{                     response( $.map( data, function( item ) {                         var code = item.split("|");                             return {                                 label: code[1],                                 value: code[1],                                 data : item                             }                         }));                     }                 }                });     },     autofocus: true,                 minlength: 2,     select: function( event, ui ) {         if( typeof ui.item.data !== "undefined" ){             var names = ui.item.data.split("|");             $(this).val(names[1]);             getclientaddress(names[0]);             //getalarmcode(names[0]);             //getotherdata(names[0]);             //getotherdata2(names[0]);             //getotherdata3(names[0]);             //getotherdata4(names[0]);             $('#client_id').val( names[0] );         }else{             return false;         }      }                }); function getclientaddress(id){       $.ajax({          url: "ajax.php",          method: 'post',           data:{id:id, type:'clientaddress'},          success: function(result){             $("#clientaddress").html(result);         }      }); } function getalarmcode(id){       $.ajax({          url: "ajax.php",          method: 'post',           data:{id:id, type:'alarmcode'},          success: function(result){             $("#alarmcode").html(result);         }      }); } 

current post code(for alarmcode value) :

if(isset($_post['type']) && $_post['type'] == 'alarmcode' ){     $id = $_post['id'];     $query = "select id, alarmcode customers id =$id";     $result = mysqli_query($db->con, $query);     $data = mysqli_fetch_assoc($result);     $alarmcode = '';     if(!empty( $data )){         $alarmcode = isset($data['alarmcode'])? $data['alarmcode']: '';      }     mysqli_close($db->con);     echo $alarmcode;exit; } 

uses jqueryui. jqueryui offers auto complet function calls webservice (that ajax call). need pass in re searching ('{value:"' + request.term + '"}'). expects list of items clientcompanyname , gatecode elements. whensomething selected list of available items gate code updates. when focus recieved on item both text boxes updated.

$("#clientcompanyname").autocomplete({             source: function(request, response) {                 $.ajax({                     type: "post",                     contenttype: "application/json; charset=utf-8",                     url: //webservicecall,                     datatype: "json",                     data: '{value:"' + request.term + '"}',                     success: function(data) {                         response($.map(data.d, function (item) {                             return {                                 label: item.clientcompanyname,                                 value: item.gatecode                             }                         }));                     }                 });             },             minlength: 2,             select: function (event, ui) {                 event.preventdefault();                 $("#clientcompanyname").val(ui.item.key);                 $("#customer_gatecode_modal").val(ui.item.value);             },             focus: function (event, ui) {                 event.preventdefault();                 if (ui.item != null) {                     $("#clientcompanyname").val(ui.item.key);                     $("#customer_gatecode_modal").val(ui.item.value);                 }             }         } 

reference:

jqueryui autocomplete