Chained ajax Select Boxes - php

Question

I have some problems with my html/php/ajax code about dependent (or chained) select. I want to show in my menu the list of faculties after I have decided the university.
I'll show you my (italian) code. I hope you'll help me. Thanks.
javascript ajax code:
<script type="text/javascript">
$(document).ready(function()
{
$(".universita").change(function()
{
var dataString = 'id='+ $(this).val();
$.ajax
({
type: "POST",
url: "ajax_facolta.php",
data: dataString,
cache: false,
success: function(html)
{
$(".facolta").html(html);
}
});
});
});
html code about two select boxes:
<td align="right">Università: </td>
<td>
<select class="input" name="universita">
<option selected="selected">--Seleziona Università--</option>
<?php
require('config.php');
$query = mysqli_query($con, "SELECT * FROM UNIVERSITA order by id ASC");
$num_righe = mysqli_num_rows($query);
for($x=0; $x<$num_righe; $x++)
{
$rs = mysqli_fetch_row($query);
$id = $rs[0];
$nome = $rs[1];
?>
<option value="<?php echo $id;?>"> <?php echo $nome; ?></option>
<?php
}
?>
</select></td>
</tr>
<tr>
<td align="right">Facoltà: </td>
<td><select class="input" name="facolta">
<option selected="selected">--Seleziona Facoltà--</option>
</select></td>
</tr>
the file ajax_facolta.php:
<?php
require('config.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql = mysqli_query($con, "SELECT * FROM FACOLTA WHERE id_univ='$id' ");
echo '<option selected="selected">--Selziona Facoltà--</option>';
while($row=mysqli_fetch_array($sql))
{
$id=$row['id'];
$nome=$row['nome'];
echo '<option value="'.$id.'">'.$nome.'</option>';
}
}
?>
and the simple configure.php:
<?php
$con = mysqli_connect("127.6.143.130","xxxxx","xxxxx", "jeme");
if (!$con)
{
die('Errore nella connessione: ' . mysqli_connect_error());
}
?>
The database is very simple.
UNIVERSITA has (id, nome)
FACOLTA has (id, nome, id_univ).
I do not find any errors but it does not work. Thanks for the help.

Answer 1

In HTML you have :
<select class="input" name="universita">
and you are using
$(".universita").change(function()
$(".universita") will try to search HTML control having class name "universita"
So change few things in code. I hope it will work
1). <select class="input" name="universita" id="universita">
2). $("#universita").change(function()
3). <td><select class="input" name="facolta" id="facolta">
4). $("#facolta").html(html);
let me know is this helpfully?.