I know this is asked question but none has helped me. I have 2 fields product
& sub_prod
in my tables. I want to show options in sub_prod select according to option selected in product.I tried example described HERE it enables the sub_prod
but it doesn't have any values. I have query with MYSQL and it gives values, hence query is correct.
I alert(response)
it shows me product's select option. I know I have a silly mistake but couldn't figure out.
my php page:
<select name="product" id="product" class="form-control form-control-sm">
<option selected="selected">Select Product </option>
<?php
$sql = mysqli_query($con, "SELECT DISTINCT product From prod_masteer");
$row = mysqli_num_rows($sql);
while ($row = mysqli_fetch_array($sql)){
echo "<option value='". $row['product'] ."'>" .$row['product'] ."</option>" ;
}
?>
</select>
<select name="sub_prod" id="sub_prod" class="form-control form-control-sm" disabled>
<option selected="selected">Select Sub product </option>
</select>
<script type="text/javascript">
$('#product').change(function() {
var prod = $(this).val();
//These are to disable enable other select
if( $(this).val() == "Vehicle") {
$('#make').prop( "disabled", false );
$('#model').prop( "disabled", false );
$('#year').prop( "disabled", false );
} else {
$('#make').prop( "disabled", true );
$('#model').prop( "disabled", true );
$('#year').prop( "disabled", true );
$('#sub_prod').prop( "disabled", false );
//document.getElementById("c_name").value=prod;
}
//////////////////////////////////////////
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'product='+prod,
success:function(response){//I tried here with html too
// alert(response);
$('#sub_prod').html(response);
//$('#city').html('<option value="">Select state first</option>');
}
});
});
</script>
my ajaxData.php
<?php
//Include database configuration file
include './db_config.php';
if(isset($_POST["product"]) && !empty($_POST["product"])){
//Get all state data
$query = $db->query("SELECT * FROM prod_masteer WHERE product = ".$_POST['product']." ORDER BY sub_prod ASC");
//Count total number of rows
$rowCount = $query->num_rows;
//Display states list
if($rowCount > 0){
echo '<option value="">Select sub Product</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['sub_prod'].'">'.$row['sub_prod'].'</option>';
}
}else{
echo '<option value="">State not available</option>';
}
}
?>
Here is the screenshot of the response I am getting from developer console.