ajax 'change' is not fired when value 'select value is set from php

Question

I have a form with city, state and country. the upon selecting a city - I automatically populate the state and country via ajax from the a mysql database.

However, when I try to select from the database to the form, the ajax change is not fired.

please What am i doing wrong? How do i read from db to select and still autpopulate dependent field?

Here is my code

 < script type = "text/javascript" > function profileLocationFunction() { $('#profilecity').change(function() { var id = $(this).val(); var dataString = id; $.ajax({ type: "GET", url: "locationautocomplete.php", dataType: 'json', data: { datatext: dataString, type: 'cityselect' }, cache: false, success: function(data) { $('#profilestate').html(data.message1); $('#profilecountry').html(data.message2); }, error: function(xhr, status, error) { alert("Hello! ERROR!" + error); } }); }); } $(document).ready(function() { profileLocationFunction(); }); < /script> 

 <?PHP require_once("include/DbConfig.php"); if($_GET['type']=='cityselect') { $stateid=""; $statedata=""; $countryid=""; $countrydata=""; //fetch state from city $id=$_GET['datatext']; $city_query="SELECT DISTINCT CITY.STT_ID, STATE.STT_ID, STATE.STT_NAME FROM CITY, STATE WHERE CITY.CTY_ID='".$id."' AND CITY.STT_ID = STATE.STT_ID"; $result=mysqli_query($DB_con, $city_query); while ($row=mysqli_fetch_assoc($result)) { $stateid=$row['STT_ID']; $statedata=$row['STT_NAME']; } //fetch country $country_query="SELECT DISTINCT STATE.CTR_ID, COUNTRY.CTR_ID, COUNTRY.CTR_NAME FROM STATE, COUNTRY WHERE STATE.STT_ID='".$stateid."' AND STATE.CTR_ID = COUNTRY.CTR_ID"; $countryresult=mysqli_query($DB_con, $country_query); while ($row=mysqli_fetch_assoc($countryresult)) { $countryid=$row['CTR_ID']; $countrydata=$row['CTR_NAME']; } //send result echo json_encode(array("message1"=>'<option value="'.$stateid.'">'.$statedata.'</option>', "message2"=>'<option value="'.$countryid.'">'.$countrydata.'</option>')); } ?> 

 <div class="form-group"> <label for="city" class="col-sm-3 control-label">City*</label> <div class="col-sm-7"> <input type="hidden" name="profileselectedcityid" id="profileselectedcityid" value='' /> <select type="text" class="form-control" name="profilecity" id="profilecity" placeholder="City"> <option selected="selected">--Select City--</option> <?php if(!$site->FetchAllCities()) { echo ' <script type="text/javascript"> alert("ERROR"); </script>'; } ?> </select> </div> </div> <div class="form-group"> <label for="state" class="col-sm-3 control-label">State*</label> <div class="col-sm-7"> <input type="hidden" name="profileselectedstateid" id="profileselectedstateid" value='' /> <select type="text" class="form-control" name="profilestate" id="profilestate" placeholder="City"> <option selected="selected">--Select State--</option> </select> </div> </div> <div class="form-group"> <label for="country" class="col-sm-3 control-label">Country*</label> <div class="col-sm-7"> <input type="hidden" name="profileselectedcountryid" id="profileselectedcountryid" value='' /> <select type="text" class="form-control" name="profilecountry" id="profilecountry" placeholder="City"> <option selected="selected">--Select Country--</option> </select> </div> </div> 

Answer 1

Try to replace your javascript code to:

 function profileLocationFunction() {
      var id = $(this).val();
      var dataString = id;
      $.ajax({
        type: "GET",
        url: "locationautocomplete.php",
        dataType: 'json',
        data: {
          datatext: dataString,
          type: 'cityselect'
        },
        cache: false,
        success: function(data) {
          $('#profilestate').html(data.message1);
          $('#profilecountry').html(data.message2);
        },
        error: function(xhr, status, error) {
          alert("Hello! ERROR!" + error);
        }
      });

    }


$(document).ready(function() {
       $('#profilecity').change(profileLocationFunction).change();

});

I just remove the event from function, maybe it's better.