PHP-jquery-ajax dynamic dependent selection - difficulty

Question

I'm programming a simple form with a dynamic dependent selection. There are two files. One is a php file with html, javascript and php inside, the second is a php file to get data for the second selection and send them back in json format. In the first (and main) file I have the form with two select fields. First field is for province, second is for towns. Data are in a MySQL db, two tables, table_provinces for provinces (103 rows) and table_towns for towns (8000 rows). Normally connect to the db as usual and also link to jquery using a javascript link. First I get provinces options for the first select field, using php to get the values from table_provinces of the db. Then with the javascript " on('change',function(){ here I use ajax...}) " I pass the selected value using ajax to a php file that might extract towns from table_towns and give back (in json format) values to populate the second select field. Javascript gets correctly the selected value from the first selection field (I used an alert to know it), but nothing more happens. So this is the code.

Link to jquery:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

HTML first select field:

 <form method="post" action="usemychoice.php"> <select id="province" name="province" color="white"> <option value="" selected>Select a province</option> 

This is how I populate the first select field:

 <?php $sql = "SELECT * FROM table_provinces"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { echo "<option value='".$row['prov']."'>".$row['extended_province']."</option>"; } } else { echo "Error: .........."; } ?> 

And after closing that field with a /select I have this code to get values for populating with town names the second select field:

 <script type="text/javascript"> $(document).ready(function(){ $('#province').on('change',function(){ var provinceID = $(this).val(); if(provinceID){ window.alert("ok you've chosen the province "+provinceID); $.ajax({ type:'POST', url:'get_towns.php', data: 'prov='+provinceID, success:function(html){ $('#town').html(html); } }); }else{ $('#town').html('<option value="">Please select the province first</option>'); } }); }); </script> 

This is the get_town.php code:

 <?php //*****after a require to the connection db routine" if(!empty($_POST["prov"])) { $sql = "SELECT * FROM table_towns WHERE prov LIKE '%" .$_POST['prov']."%'"; $result = mysqli_query($conn, $sql); $json = []; if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { $json[$row['prov']] = $row['town']; } else { echo "Error: ................."; } echo json_encode($json); } ?> 

Finally I have the html code :

 <select id="town" name="town" color="white"> <option value="" selected>Select province first</option> 

At the end of the day, the code has something wrong because I don't get any data back from get_town.php to populate the second select field, and since I didn't see a window.alert that I've put there to check ongoing execution (you don't see it in the code posted here), it seems that is not executed. Any help?

Answer 1

 url:'get_towns.php',

没有复数形式的get_town.php吗？

Answer 2

Apparently it seems that the output of get_town.php is JSON

echo json_encode($json);

but in your JS it is directly output to an html element

$('#town').html(html);

Solution:

Either modify get_town.php to send html OR modify the success function in JS to convert received JSON to proper html.

I hope this will help.

UPDATE:

Replace this part of php

while($row = mysqli_fetch_assoc($result)) {

    $json[$row['prov']] = $row['town'];

}

with something

echo '<option value="" selected>Select Town</option>';

while($row = mysqli_fetch_assoc($result)) {

    echo '<option  value="'.$row['town'].'" color="white">'.$row['town'].'</option>';

}

and finally remove the line

echo json_encode($json);