Popular selects with php, jquery and mysql

Asked

Viewed 224 times

0

Good afternoon, colleagues I am with a doubt that for a long time I have been trying to solve and I can not get that is popular 4 selects using php, mysql, ajax and jquery. Searching for answers on google I found an example that teaches the popular 3 selects, and in the example you selected the country, then the state and last the city. Except that 3 selects for me, does not serve because for my application to work I would need at least 4 selects, because I would do as follows: first selects the make of the car, according to the model of the car, third year of the car and last the engine of the car only that. Can anyone shed some light on that problem? I’ll post my codes Index.php

    <?php 
    // Include the database config file 
    include_once 'dbConfig.php'; 

    // Fetch all the marca data 
    $query = "SELECT * FROM marca WHERE status = 1 ORDER BY marca_name ASC"; 
    $result = $db->query($query); 
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- marca dropdown -->
<select id="marca">
    <option value="">Selecione a marca</option>
    <?php 
    if($result->num_rows > 0){ 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['marca_id'].'">'.$row['marca_name'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">Marcas não disponiveis</option>'; 
    } 
    ?>
</select>

<!-- carro dropdown -->
<select id="carro">
    <option value="">Selecione uma marca primeiro</option>
</select>

<!-- ano dropdown -->
<select id="ano">
    <option value="">selecione um carro primeiro</option>
</select>

<!-- motor dropdown -->
<select id="motor">
    <option value="">Selecione um ano primeiro</option>
</select>
<script>
$(document).ready(function(){
    $('#marca').on('change', function(){
        var marcaID = $(this).val();
        if(marcaID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'marca_id='+marcaID,
                success:function(html){
                    $('#carro').html(html);
                    $('#ano').html('<option value="">Select ano first</option>'); 
                }
            }); 
        }else{
            $('#carro').html('<option value="">Select country first</option>');
            $('#ano').html('<option value="">Select state first</option>');
            $('#motor').html('<option value="">Selecione um ano primeiro</option>');
        }
    });

    $('#carro').on('change', function(){
        var carroID = $(this).val();
        if(carroID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'carro_id='+carroID,
                success:function(html){
                    $('#ano').html(html);
                }
            }); 
        }else{
            $('#ano').html('<option value="">Select state first</option>');
            $('#motor').html('<option value="">Selecione um ano primeiro</option>');
        }
    });

    $('#ano').on('change', function(){
        var anoID = $(this).val();
        if(anoID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'ano_id='+anoID,
                success:function(html){
                    $('#motor').html(html);
                }
            }); 
        }else{
            $('#ano').html('<option value="">Select state first</option>');
            $('#motor').html('<option value="">Selecione um ano primeiro</option>');
        }
    });



});
</script>

now the ajaxData.php

    <?php 
// Include the database config file 
include_once 'dbConfig.php'; 

if(!empty($_POST["marca_id"])){ 
    // Fetch state data based on the specific country 
    $query = "SELECT * FROM carro WHERE marca_id = ".$_POST['marca_id']." AND status = 1 ORDER BY carro_name ASC"; 
    $result = $db->query($query); 

    // Generate HTML of state options list 
    if($result->num_rows > 0){ 
        echo '<option value="">Select State</option>'; 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['carro_id'].'">'.$row['carro_name'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">State not available</option>'; 
    } 
}elseif(!empty($_POST["carro_id"])){ 
    // Fetch city data based on the specific state 
    $query = "SELECT * FROM ano WHERE carro_id = ".$_POST['carro_id']." AND status = 1 ORDER BY ano ASC"; 
    $result = $db->query($query); 

    // Generate HTML of city options list 
    if($result->num_rows > 0){ 
        echo '<option value="">Select city</option>'; 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['ano_id'].'">'.$row['ano'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">City not available</option>'; 
    } 
}

elseif(!empty($_POST["ano_id"])){ 
    // Fetch city data based on the specific state 
    $query = "SELECT * FROM motor WHERE motor_id = ".$_POST['motor_id']." AND status = 1 ORDER BY motor_id ASC"; 
    $result = $db->query($query); 

    // Generate HTML of city options list 
    if($result->num_rows > 0){ 
        echo '<option value="">Select city</option>'; 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['motor_id'].'">'.$row['motor_name'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">Motor não disponivel</option>'; 
    } 
}
?>

and now the connection to mysql

<?php 
// Database configuration 
$dbHost     = "localhost"; 
$dbUsername = "root"; 
$dbPassword = ""; 
$dbName     = "carro"; 

// Create database connection 
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 

// Check connection 
if ($db->connect_error) { 
    die("Connection failed: " . $db->connect_error); 
}

Every time you arrive at the engine part it does not load the engine list and I have no idea what might have happened. Thank you very much for the response

  • You didn’t set the event onChange for the engine and consultation for the year is mixed with the engine consultation.

  • Okay, thank you very much, I’ll try to fix this mistake

  • but if it makes two qtos precise, the logic is the same, it does not need an example with exact 4. just put an ajax call in the onchange of the first, which loads the second, in the onchange of the 2 other ajax which loads the third, and so on, for as many as need

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.