Help with Combo Box with Ajax

Question

Help with Combo Box with Ajax

Navigation

#1 by (1 votes)

1

I used a YouTube video lesson to create a Combo Box for States and Cities, but I followed the reasoning of the STATES.PHP page and I inserted it in the CITIES.PHP page and created the BAIRROS.PHP page, but I did not succeed because when I enter <select name="cidades" id="cidades"> on the cities.php page it does not list me cities.

My friends tell me how to continue the Combo by bringing the cities, so I can search the neighborhoods with the BAIRROS.PHP page.

Page Code STATES.PHP and Table states below:

<?php include 'conexao.php';?>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>

<div style="float:left; width:auto; padding:0 1px">
    <select name="estados" id="estados">
        <option value="">Estados...</option>
            <?php
                $sql = $pdo->prepare("SELECT * FROM estados ORDER BY nome_estado ASC");
                $sql->execute();
                $fetchAll = $sql->fetchAll();
                foreach($fetchAll as $estados)
                {
                    echo '<option value="'.$estados['cod_estado'].'">'.$estados['nome_estado'].'</option>';
                }
            ?>
    </select>
</div>
<div style="float:left; width:auto; padding:0 1px">
    <select id="cidades" style="display:none"></select>
</div>

<script>
    $("#estados").on("change",function(){
        var cod_Estado = $("#estados").val();
        $.ajax({
            url: 'cidades.php',
            type: 'POST',
            data:{cod_estado:cod_Estado},
            beforeSend: function(){
                $("#cidades").css({'display':'block'});
                $("#cidades").html("Carregando...");
                },
                success: function(data)
                {
                    $("#cidades").css({'display':'block'});
                    $("#cidades").html(data);
                },
                error: function(data)
                {
                    $("#cidades").css({'display':'block'});
                    $("#cidades").html("Houve um erro ao carregar");
                }
            });
    });
</script>

PageCITIES.PHPandTablecitiesbelow:

<?phpinclude'conexao.php';?><metacharset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>

<div style="float:left; width:auto; padding:0 1px">
    <select name="cidades" id="cidades">
        <option value="">Cidades...</option>
            <?php
                $sql = $pdo->prepare("SELECT * FROM cidades WHERE cod_estado = '".$_POST['cod_estado']."'");
                $sql->execute();
                $fetchAll = $sql->fetchAll();
                foreach($fetchAll as $cidades)
                {
                    echo '<option value="'.$cidades['cod_cidade'].'">'.$cidades['nome_cidade'].'</option>';
                }
            ?>
    </select>
</div>
<div style="float:left; width:auto; padding:0 1px">
    <select id="bairros" style="display:none"></select>
</div>
<script>
    $("#cidades").on("change",function(){
        var cod_Cidade = $("#cidades").val();
        $.ajax({
            url: "bairros.php",
            type: "POST",
            data:{cod_cidade:cod_Cidade},
            beforeSend: function(){
                $("#bairros").css({"display":"block"});
                $("#bairros").html("Carregando...");
                },
                success: function(data)
                {
                    $("#bairros").css({"display":"block"});
                    $("#bairros").html(data);
                },
                error: function(data)
                {
                    $("#bairros").css({"display":"block"});
                    $("#bairros").html("Houve um erro ao carregar");
                }
            });
    });
</script>

PageCodeBAIRROS.PHPandTableneighborhoodsbelow:

<?phpinclude'conexao.php';$sql=$pdo->prepare("SELECT * FROM bairros WHERE cod_cidade = '".$_POST['cod_cidade']."'");
    $sql->execute();
    $fetchAll = $sql->fetchAll();
    foreach($fetchAll as $bairros)
    {
        echo '<option>'.$bairros['nome_bairro'].'</option>';
    }
?>

php ajax pdo

asked by anonymous 12.11.2017 / 18:03

1 answer

How do I get the value returning from console.log (results [4] .geocode) to use when comparing my if? Put responsive site

score 1 · Accepted Answer

Basically, the files cidades.php and bairros.php consist only of queries to the database, everything else inside the file estados.php

The js/jquery.js library, the scripts and the divs where selects will be displayed within the estados.php

You can use <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>insteadof<scripttype="text/javascript" src="js/jquery.js"></script>

In the first script this line of code was added,

$("#bairros").css({"display":"none"});

See why in the comment within the code

states.php

<?php include 'conexao.php';?>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>

<div style="float:left; width:auto; padding:0 1px">
    <select name="estados" id="estados">
        <option value="">Estados...</option>
            <?php
                $sql = $pdo->prepare("SELECT * FROM estados ORDER BY nome_estado ASC");
                $sql->execute();
                $fetchAll = $sql->fetchAll();
                foreach($fetchAll as $estados)
                {
                    echo '<option value="'.$estados['cod_estado'].'">'.$estados['nome_estado'].'</option>';
                }
            ?>
    </select>
</div>
<div style="float:left; width:auto; padding:0 1px">
    <select id="cidades" style="display:none"></select>
</div>

<script>
    $("#estados").on("change",function(){
        var cod_Estado = $("#estados").val();
        $.ajax({
            url: 'cidades2.php',
            type: 'POST',
            data:{cod_estado:cod_Estado},
            beforeSend: function(){
                $("#cidades").css({'display':'block'});
                $("#cidades").html("Carregando...");

                //quando mudar de estado esconde select de bairros
                $("#bairros").css({"display":"none"});

                },
                success: function(data)
                {
                    $("#cidades").css({'display':'block'});
                    $("#cidades").html(data);
                },
                error: function(data)
                {
                    $("#cidades").css({'display':'block'});
                    $("#cidades").html("Houve um erro ao carregar");
                }
            });
    });
</script>


<div style="float:left; width:auto; padding:0 1px">
    <select id="bairros" style="display:none"></select>
</div>
<script>
    $("#cidades").on("change",function(){
        var cod_Cidade = $("#cidades").val();
        $.ajax({
            url: "bairros.php",
            type: "POST",
            data:{cod_cidade:cod_Cidade},
            beforeSend: function(){
                $("#bairros").css({"display":"block"});
                $("#bairros").html("Carregando...");
                },
                success: function(data)
                {
                    $("#bairros").css({"display":"block"});
                    $("#bairros").html(data);
                },
                error: function(data)
                {
                    $("#bairros").css({"display":"block"});
                    $("#bairros").html("Houve um erro ao carregar");
                }
            });
    });
</script>

cities.php

<?php
include 'conexao.php';
   $sql = $pdo->prepare("SELECT * FROM cidades WHERE cod_estado = '".$_POST['cod_estado']."'");
   $sql->execute();
   $fetchAll = $sql->fetchAll();
   echo '<option value="">Cidades...</option>';
   foreach($fetchAll as $cidades)
   {
     echo '<option value="'.$cidades['cod_cidade'].'">'.$cidades['nome_cidade'].'</option>';
   }
?>

bairros.php

<?php
include 'conexao.php';
    $sql = $pdo->prepare("SELECT * FROM bairros WHERE cod_cidade = '".$_POST['cod_cidade']."'");
    $sql->execute();
    $fetchAll = $sql->fetchAll();
    echo '<option value="">Bairros...</option>';
    foreach($fetchAll as $bairros)
    {
        echo '<option value="'.$bairros['cod_bairro'].'">'.$bairros['nome_bairro'].'</option>';
    }
?>