Use comboboxes to list cities and neighborhoods

Question

Use comboboxes to list cities and neighborhoods

Navigation

#1 by (0 votes)

0

I want users to select the city and neighborhood they are in, and then the city and neighborhood they want to go to through 4 comboboxes. The data is being pulled from the database, and the 2 "I'm in:" comboboxes are working, but the "I want to go to:" does not.

Print what happens: link

Print from database: link

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><scripttype="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><scripttype="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>

bairros.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

asked by anonymous 14.04.2015 / 17:25

1 answer

List.Js does not work Error in the validation of the CPF

score 0 · Accepted Answer

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 informing the column $ row ['cod_brows2'] that does not exist, the column name is cod_browse. So the correct one would be:

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

Enjoy and review all changed names in the second file. However the file to be requested can be the same in both cases. Add at the end of the form your jquery code 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 only direct the return target of the query.