I have 3 inputs ( generation, fuel and engine) with predefined values.
<div class="row">
<div class="col-md-6 b-submit__main-element wow zoomInUp" data-wow-delay="0.5s">
<label>Generatie <span>*</span></label>
<div class='s-relative'>
<select class="m-select" name="car-generation" id="car-generation">
<option value='0' name='generation_name' id='generation_name'>Alege mai intai un model</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
</div>
<div class="col-md-6 b-submit__main-element wow zoomInUp" data-wow-delay="0.5s">
<label>Combustibil <span>*</span></label>
<div class='s-relative'>
<select class="m-select" name="car-fuel" id="car-fuel">
<option value='0' name='fuel_name' id='fuel_name'>Alege mai intai o generatie</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 b-submit__main-element wow zoomInUp" data-wow-delay="0.5s">
<label>Engine <span>*</span></label>
<div class='s-relative'>
<select class="m-select" name="car-engine" id="car-engine">
<option value='0' name='engine_name' id='engine_name'>Alege mai intai un combustibil</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
</div>
So far, when I select something from the generation input, the fuel input shows the needed values. But when I select a fuel from the fuels input, the engines input doesn’t show anything.
This is the JS Code:
$(document).ready(function(){
$('#car-generation').on('change',function(){
var generation_id = $(this).val();
if(generation_id > 0){
$.ajax({
type:'POST',
url:'ajax.php',
data:'generation_id='+generation_id,
success:function(html){
$('#car-fuel').html(html);
}
});
}else{
$('#car-fuel').html('<option value="0">Alege mai intai o generatie</option>');
}
});
$('#car-fuel').on('change',function(){
var fuel_id = $(this).val();
if(fuel_id > 0){
$.ajax({
type:'POST',
url:'ajax.php',
data: {fuel_id:'fuel_id', generation_id:'generation_id'},
success:function(html){
$('#car-engine').html(html);
}
});
}else{
$('#car-engine').html('<option value="0">Alege un motor</option>');
}
});
$('#car-engine').on('change',function(){
var engine_id = $(this).val();
if(engine_id > 0){
$.ajax({
type:'POST',
url:'ajax.php',
data:'engine_id='+engine_id,
success:function(html){
$('#car-transmission').html(html);
}
});
}else{
$('#car-transmission').html('<option value="0">Alege o transmisie</option>');
}
});
});
…and this is the PHP:
<?php
if(isset($_POST["generation_id"]) && !empty($_POST["generation_id"]))
{
$generation_id = $_POST["generation_id"];
$query = $mysqli->query("SELECT fuel_id, fuel_name FROM fuels WHERE generation_id =" . $_POST['generation_id']);
$rowCount = $query->num_rows;
if($rowCount > 0)
{
echo '<option value="0">Alege un combustibil</option>';
while($row = $query->fetch_assoc())
{
echo '<option value="'.$row['fuel_id'].'">'.$row['fuel_name'].'</option>';
}
}else
{
echo '<option value="0">Alege un combustibil</option>';
}
}
if(isset($_POST["fuel_id"]) && !empty($_POST["fuel_id"]))
{
$fuel_id = $_POST["fuel_id"];
$query = $mysqli->query("SELECT engines.engine_id, engines.engine_name FROM engines INNER JOIN generations ON engines.generation_id = generations.generation_id INNER JOIN fuels ON engines.fuel_id = fuels.fuel_id WHERE engines.generation_id = '$generation_id' AND engines.fuel_id = '$fuel_id'");
$rowCount = $query->num_rows;
if($rowCount > 0)
{
echo '<option value="0">Alege un motor</option>';
while($row = $query->fetch_assoc())
{
echo '<option value="'.$row['engine_id'].'">'.$row['engine_name'].'</option>';
}
}else
{
echo '<option value="0">Alege un motor</option>';
}
}
?>
What am I doing wrong? I don’t have experience with Javascript, AJAX and jquery.
I tried searching for a resolve online, but didn’t find anything