Use comboboxes to list cities and neighborhoods

Asked

Viewed 349 times

0

I want users to select the city and neighborhood where they are and then the city and neighborhood where they want to go through 4 comboboxes. The data is being pulled from the database, and the two "I’m in" comboboxes are working, but the "I want to go to:" comboboxes aren’t.

Print of what happens: http://i.stack.Imgur.com/pq8ta.png

Print of the database: http://i.stack.Imgur.com/D6qqf.png

index php.:

    <body>
    <?php
        $con = mysql_connect( 'localhost', 'root', '' ) ;
        mysql_select_db( 'fretadoaqui', $con );
    ?>

Estou em</br>
    <label for="cod_cidades">Cidade:</label>
    <select name="cod_cidades" id="cod_cidades">
        <option value=""></option>
        <?php

            $sql = "SELECT cod_cidades, nome
                    FROM cidades
                    ORDER BY nome";
            $res = mysql_query( $sql );

            while ( $row = mysql_fetch_assoc( $res ) ) {
                echo '<option value="'.$row['cod_cidades'].'">'.(utf8_encode($row['nome'])).'</option>';
            }
        ?>
    </select>

    <label for="cod_bairros">Bairro/região:</label>
    <span class="carregando">Carregando...</span>
    <select name="cod_bairros" id="cod_bairros">
        <option value="">Escolha uma cidade</option>
    </select>

    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('jquery', '1.3');
    </script>

    <script type="text/javascript">
    $(function(){
        $('#cod_cidades').change(function(){
            if( $(this).val() ) {
                $('#cod_bairros').hide();
                $('.carregando').show();
                $.getJSON('bairros.ajax.php?search=',{cod_cidades: $(this).val(), ajax: 'true'}, function(j){
                    var options = '<option value=""></option>';
                    for (var i = 0; i < j.length; i++) {
                        options += '<option value="' + j[i].cod_bairros + '">' + j[i].nome + '</option>';
                    }
                    $('#cod_bairros').html(options).show();
                    $('.carregando').hide();
                });
} else {
                $('#cod_bairros').html('<option value="">Escolha uma cidade</option>');
            }
        });
    });
    </script>

</br>Quero ir para</br>
    <label for="cod_cidades2">Cidade:</label>
    <select name="cod_cidades2" id="cod_cidades2">
        <option value=""></option>
        <?php
            $sql = "SELECT cod_cidades, nome
                    FROM cidades
                    ORDER BY nome";
            $res = mysql_query( $sql );
            while ( $row = mysql_fetch_assoc( $res ) ) {
                echo '<option value="'.$row['cod_cidades2'].'">'.(utf8_encode($row['nome'])).'</option>';
            }
        ?>
    </select>

    <label for="cod_bairros2">Bairro/região:</label>
    <span class="carregando">Carregando...</span>
    <select name="cod_bairros2" id="cod_bairros2">
        <option value="">Escolha uma cidade</option>
    </select>

    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('jquery', '1.3');
    </script>

    <script type="text/javascript">
    $(function(){
        $('#cod_cidades2').change(function(){
            if( $(this).val() ) {
                $('#cod_bairros2').hide();
                $('.carregando').show();
                $.getJSON('bairros2.ajax.php?search=',{cod_cidades2: $(this).val(), ajax: 'true'}, function(l){
                    var options = '<option value=""></option>';
                    for (var i = 0; j < l.length; i++) {
                        options += '<option value="' + j[i].cod_bairros2 + '">' + j[i].nome + '</option>';
                    }
                    $('#cod_bairros2').html(options).show();
                    $('.carregando').hide();
                });

} else {
                $('#cod_bairros2').html('<option value="">Escolha uma cidade</option>');
            }
        });
    });
    </script>

</body>

neighborhoods.ajax.php:

<?php
header( 'Cache-Control: no-cache' );
header( 'Content-type: application/xml; charset="utf-8"', true );

$con = mysql_connect( 'localhost', 'root', '' ) ;
mysql_select_db( 'fretadoaqui', $con );

$cod_cidades = mysql_real_escape_string( $_REQUEST['cod_cidades'] );

$bairros = array();

$sql = "SELECT cod_bairros, nome
        FROM bairros
        WHERE cidades_cod_cidades=$cod_cidades
        ORDER BY nome";
$res = mysql_query( $sql );
while ( $row = mysql_fetch_assoc( $res ) ) {
    $bairros[] = array(
        'cod_bairros'   => $row['cod_bairros'],
        'nome'          => (utf8_encode($row['nome'])),
    );
}

echo( json_encode( $bairros ) );

bairros2.ajax.php:

<?php
header( 'Cache-Control: no-cache' );
header( 'Content-type: application/xml; charset="utf-8"', true );

$con = mysql_connect( 'localhost', 'root', '' ) ;
mysql_select_db( 'fretadoaqui', $con );

$cod_cidades2 = mysql_real_escape_string( $_REQUEST['cod_cidades2'] );

$bairros = array();

$sql = "SELECT cod_bairros, nome
        FROM bairros
        WHERE cidades_cod_cidades=$cod_cidades2
        ORDER BY nome";
$res = mysql_query( $sql );
while ( $row = mysql_fetch_assoc( $res ) ) {
    $bairros[] = array(
        'cod_bairros2'  => $row['cod_bairros2'],
        'nome'          => (utf8_encode($row['nome'])),
    );
}

echo( json_encode( $bairros ) );
php sql ajax combobox

1 answer

0


In the file bairros2.ajax.php in the lines:

while ( $row = mysql_fetch_assoc( $res ) ) {
    $bairros[] = array(
        'cod_bairros2'  => $row['cod_bairros2'],
        'nome'          => (utf8_encode($row['nome'])),
        );
}

You are entering the column $Row['cod_bairros2'] that does not exist, the column name is cod_neighborhoods. So the correct would be:

while ( $row = mysql_fetch_assoc( $res ) ) {
    $bairros[] = array(
        'cod_bairros2'  => **$row['cod_bairros']**,
        'nome'          => (utf8_encode($row['nome'])),
        );
}

Take advantage and review all the names changed in the second file. However the file to be requested may be the same in both cases. Add your jquery code at the end of the form by changing only the IDS. As follows:

<script type="text/javascript">
$(function(){
    $('#cod_cidades').change(function(){
       consultaBairros($(this), $("#cod_bairros"));
    });
    $('#cod_cidades2').change(function(){
       consultaBairros($(this), $("#cod_bairros2"));
    });
});

function consultaBairros(cod_cidades, comboBairros){
    if( cod_cidades.val() ) {
        comboBairros.hide();
        $('.carregando').show();
        $.getJSON('bairros.ajax.php?search=',{cod_cidades: cod_cidades.val(), ajax: 'true'}, function(j){
            var options = '<option value=""></option>';
            for (var i = 0; i < j.length; i++) {
                options += '<option value="' + j[i].cod_bairros + '">' + j[i].nome + '</option>';
            }
            comboBairros.html(options).show();
            $('.carregando').hide();
        });
    } else {
        comboBairros.html('<option value="">Escolha uma cidade</option>');
    }
});
}
</script>

So you call the function and just directs the destination of the query return.

  • Man, thank you so much, you helped me a lot!

Browser other questions tagged php sql ajax combobox

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