Pass value to variable

Question

I need the variable $idestados receive status id value when an option is selected but I’m getting beat up by ajax and jquery so I want to know if you have a better option to do this.

The $anuncio is a class that selects in the table bdd states through the selEstados() and returns an array with all the information, it also has the selCidades(id_estado) which does the same with bdd’s cities table but it receives the state id as parameter:

 <select name="estados" id="estados" ">                                    
    <option value="0" selected disabled>Selecione um estado</option>
    <?php 
    $estados=$anuncio->selEstados();
    foreach ($estados as $estado){
       echo '<option value="'.$estado['id'].'">'.$estado['sigla'].'- 
     '.$estado['nome'].'</option>';
    }

    ?>
 </select><br>
 <select name="cidades" id="cidades" >
    <option value="0">Selecione um estado primeiro...</option>
    <?php
        $cidades=$anuncio->selCidades($idestados);
        foreach ($cidades as $cidade){                                            
            echo '<option value"'.$cidade['nome'].'">'.$cidade['nome'].'</option>';
        }
    ?>

 </select>

this code

require_once "anuncio.php";
$anuncio =  new anuncio();
$estados= $anuncio->selEstados();
print_r($estados);

produces this result:

likewise the

require_once "anuncio.php";
$anuncio =  new anuncio();
$cidades= $anuncio->selCidades();
print_r($cidades);

will produce the same effect but with city names and state id instead of the acronym

Answer 1

could give me an example of how it would work based on the code I passed up there?

Form file (.php):

<?php
    // INICIALIZAÇÃO DAS VARIÁVEIS:
    $estados = array("RIO DE JANEIRO", "ESPÍRITO SANTO", "MINAS GERAIS", "BAHIA");
?>

<!-- CARREGAMENTO DO JQUERY -->
<script src="scripts/jquery-1.12.0.min.js" type="text/javascript"></script>

<select name="estados" id="estados">
    <option value="0" selected disabled>Selecione um estado</option><?php
    //$estados=$anuncio->selEstados();
    foreach ($estados as $estado) {
        echo "<option value=\"".$estado."\">".$estado."</option>";
    } ?>
</select>

<br>

<select name="cidades" id="cidades">
    <option value="0">Selecione um estado primeiro...</option>
</select>

<script type="text/javascript">
    $(function(){
        $('#estados').on('change', function(){
            $.ajax({
                url: 'getcidades.php',
                data: 'estado=' + $('#estados').val(),
                dataType: "json",
                method: 'POST',
                cache: false,
                beforeSend: function() {
                    console.log($('#estados').val());
                },
                success: function(data) {
                    let options;
                    $.each(data, function(chave, valor){
                        options += "<option value=\""+valor+"\">"+valor+"</option>";
                    });
                    $('#cidades').html(options);
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });
    });
</script>

File that handles the requisition of Ajax (getcities.php):

<?php
    header('Content-Type: application/json');

    if ($_POST['estado']) {
        switch($_POST['estado']) {
            case "RIO DE JANEIRO":
                $cidades = array("RIO DE JANEIRO", "SÃO GONÇALO", "NITERÓI");
                break;
            case "ESPÍRITO SANTO":
                $cidades = array("VITÓRIA", "GUARAPARY", "VILA VELHA");
                break;
            case "MINAS GERAIS":
                $cidades = array("BELO HORIZONTE", "VIÇOSA", "JUIZ DE FORA");
                break;
            case "BAHIA":
                $cidades = array("SALVADOR", "PORTO SEGURO", "JUAZEIRO");
                break;
        }
        echo json_encode($cidades);
    }

• Of course it’s quite simple! It’s just a copy for you to adapt as your need...

• Note that for this example we used the jQuery in version 1.12! If you use a newer version, you should be aware of depreciation and successive removal of attributes success and error used in that code.

Deprecation Notice: The jqXHR.Success(), jqXHR.error(), and jqXHR.complete() callbacks are Removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.Always() Instead.

Reading recommendation: jQuery.ajax()

Special thanks to @Guilherme Costamilam by notifying and updating the code with the jQuery in version 3.

Answer 2

The @Lipespry example illustrates exactly what you need, but sucess and error are obsolete and have changed to done and fail:

$(function(){
    $('#estados').on('change', function(){
        $.ajax({
            url: 'getcidades.php',
            data: 'estado=' + $('#estados').val(),
            dataType: "json",
            method: 'POST',
            cache: false,
            beforeSend: function() {
                console.log($('#estados').val());
            }
         }).done(function(data) {
                let options;
                $.each(data, function(chave, valor){
                    options += "<option value=\""+valor+"\">"+valor+"</option>";
                });
                $('#cidades').html(options);
        }).fail(function(e) {
                console.log(e);
        });
    });
});

Answer 3

solved like this:

<select name="estados" id="estados" title="Selecione um Estado">
    <option value="0" selected disabled>Selecione um estado</option>
    <?php
      $feachall=$anuncio->selEstados();
      foreach ($feachall as $estados){
         echo '<option value="'.$estados['id'].'">'.$estados['nome'].'</option>';
      }                      
     ?>
</select><br>
<select name="cidades" id="cidades"  >
     <option value="0">Selecione um estado primeiro...</option>


</select><br>

the script

<script>
$("#estados").on("change",function(){
let idEstado = $("#estados").val();
$.ajax({
    url: 'pega_cidades.php',
    type: 'POST',
    data:{id:idEstado},
    beforeSend: function(){

        $("#cidades").html("Carregando...");
    },
    success: function(data){

        $("#cidades").html(data);
    },
    error: function(){

        $("#cidades").html("Houve um erro ao carregar");
    }
  });
});

</script>

and the page takes cities.php

<?php
    require_once'../cerebro/conectarbdd.php';
    $db = new conectarbdd;
    $conexao=$db->conectar();
    $conexao->exec("SET CHARACTER SET utf8");
    $pegaCidades=$conexao->prepare("SELECT * FROM cidades WHERE 
    estados_id='".$_POST['id']."'" );
    $pegaCidades->execute();
    $fetchall = $pegaCidades->fetchAll();

    foreach ($fetchall as $cidades){

      echo '<option value="'.$cidades['nome'].'">'.$cidades['nome'].'</option>';
  }