Doubts with value of the selects

1

I made this form with the selects doing direct database search and also sorting the data, but at the time of sending the answered form the value that goes in <option> is not the value that I want and yes another value, as shown in the first field of the form that would be "REGIONAL" . The value that enters is the variable id_regional , but I want that of the regional variable.

Note: To help you better understand the workings of this part of the code link . .

<?php
     include '/conexion.php'; 


    $query = "SELECT id_regional, regional FROM t_regional ORDER BY regional";
    $resultado=$mysqli->query($query);
?>

<html>
    <head>
        <title>ComboBox Ajax, PHP y MySQL</title>

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scriptlanguage="javascript">
            $(document).ready(function(){
                $("#cbx_regional").change(function () {

                    $('#cbx_tipoUnidade').find('option').remove().end().append('<option value="whatever"></option>').val('whatever');

                    $("#cbx_regional option:selected").each(function () {
                        id_regional = $(this).val();
                        $.post("includes/getRPA.php", { id_regional: id_regional }, function(data){
                            $("#cbx_rpa").html(data);
                        });            
                    });
                })
            });

            $(document).ready(function(){
                $("#cbx_rpa").change(function () {
                    $("#cbx_rpa option:selected").each(function () {
                        id_rpa = $(this).val();
                        $.post("includes/getTipoUnidade.php", { id_rpa: id_rpa }, function(data){
                            $("#cbx_tipoUnidade").html(data);
                        });            
                    });
                })
            });

            $(document).ready(function(){
                $("#cbx_tipoUnidade").change(function () {
                    $("#cbx_tipoUnidade option:selected").each(function () {
                        id_tipoUnidade = $(this).val();
                        $.post("includes/getUnidade.php", { id_tipoUnidade: id_tipoUnidade }, function(data){
                            $("#cbx_Unidade").html(data);
                        });            
                    });
                })
            });

            $(document).ready(function(){
                $("#cbx_Unidade").change(function () {
                    $("#cbx_Unidade option:selected").each(function () {
                        id_unidade = $(this).val();
                        $.post("includes/getInep.php", { id_unidade: id_unidade }, function(data){
                            $("#cbx_Inep").html(data);
                        });            
                    });
                })
            });


            function populate4(verificamodalidade,resultado){
                  var verificamodalidade = document.getElementById(verificamodalidade);
                      var resultado = document.getElementById(resultado);

                        resultado.innerHTML = "";
                             if(verificamodalidade.value == "CORREÇÃO DE FLUXO"){ //verificar se o valor da modalidade de ensino
                                var optionArray = ["|","SE LIGA|SE LIGA","ACELERA|ACELERA","TRAVESSIA RECIFE|TRAVESSIA RECIFE"]; //retorna os anos de ensino
                                 } else if(verificamodalidade.value == "EDUCAÇÃO JOVENS E ADULTOS"){ //verificar se o valor da modalidade de ensino 
                                var optionArray = ["|","MÓDULO 1|MÓDULO 1","MÓDULO 2|MÓDULO 2","MÓDULO 3|MÓDULO 3","MODULADA|MODULADA"]; //retorna os anos de ensino
                                 } else if(verificamodalidade.value == "EDUCAÇÃO INFANTIL"){ //verificar se o valor da modalidade de ensino 
                                var optionArray = ["|","BERÇÁRIO|BERÇÁRIO","GRUPO I|GRUPO I","GRUPO II|GRUPO II","GRUPO III|GRUPO III","GRUPO IV|GRUPO IV","GRUPO V|GRUPO V"]; //retorna os anos de ensino
                                 } else if(verificamodalidade.value == "ENSINO FUNDAMENTAL"){ //verificar se o valor da modalidade de ensino 
                                var optionArray = ["|","1° ANO|1° ANO","2° ANO|2° ANO","3° ANO|3° ANO","4° ANO|4° ANO","5° ANO|5º ANO"]; //retorna os anos de ensino
                                 } else if(verificamodalidade.value == "ENSINO FUNDAMENTAL ESPECIAL"){ //verificar se o valor da modalidade de ensino 
                                var optionArray = ["|","1° ANO|1° ANO","2° ANO|2° ANO","3° ANO|3° ANO","4° ANO|4° ANO","5° ANO|5º ANO"]; //retorna os anos de ensino
                                 }
                                        for(var option in optionArray){
                                           var pair = optionArray[option].split("|");
                                              var newOption = document.createElement("option");
                                               newOption.value = pair[0];
                                               newOption.innerHTML = pair[1];
                                               resultado.options.add(newOption);
                                  }
                         }

        </script>

    </head>

    <body>

    <br/><br/>
<h3>Informe os dados da turma:</h3>
Os campos com <span style="color: red">*</span> são de preenchimento obrigatório!
<br/><br/><br/>
        <form id="combo" name="combo" action="guarda.php" method="POST">
            <div>Regional :<span style="color: red">*</span><br/> <select name="cbx_regional" id="cbx_regional" required >
            <option value="0"></option>
            <?php while($row = $resultado->fetch_assoc()) { ?>
            <option value="<?php echo $row['id_regional']; ?>"><?php echo $row['regional']; ?></option>
            <?php } ?>
            </select></div>
            <br/>
            <div>RPA :<span style="color: red">*</span><br/> <select name="cbx_rpa" id="cbx_rpa" required>
            </select></div>
            <br />
            <div>Tipo de Unidade :<span style="color: red">*</span><br/> 
            <select name="cbx_tipoUnidade" id="cbx_tipoUnidade" required></select></div>
            <br/>
            <div>Unidade de Ensino :<span style="color: red">*</span><br/> 
            <select name="cbx_Unidade" id="cbx_Unidade" required></select></div>
            <br/>
            <div>INEP :<span style="color: red">*</span><br/> <select name="cbx_Inep" id="cbx_Inep" required>
            </select></div>
            <br/>
            Modalidade de Ensino:<span style="color: red">*</span><br/>
            <select id="mod" name="mod" onchange="populate4(this.id,'ano')" required>
            <option value=""></option>
            <option value="CORREÇÃO DE FLUXO">CORREÇÃO DE FLUXO</option>
            <option value="EDUCAÇÃO INFANTIL">EDUCAÇÃO INFANTIL</option>
            <option value="EDUCAÇÃO JOVENS E ADULTOS">EDUCAÇÃO JOVENS E ADULTOS</option>
            <option value="ENSINO FUNDAMENTAL">ENSINO FUNDAMENTAL</option>
            <option value="ENSINO FUNDAMENTAL ESPECIAL">ENSINO FUNDAMENTAL ESPECIAL</option>
            </select>
            <br/><br/>
            Ano de Ensino:<span style="color: red">*</span><br/>
            <select id="ano" name="ano" required></select>
            <br/><br/>
            Turma:<span style="color: red">*</span><br/>
            <select id="turma" name="turma" required>
            <option value=""></option>
            <option value="A">A</option>  
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
            <option value="G">G</option>
            <option value="H">H</option>
            <option value="I">I</option>
            </select>
            <br/><br/>
            Turno:<span style="color: red">*</span><br/>
            <select id="turno" name="turno" required>
            <option value=""></option>
            <option value="MANHÃ">MANHÃ</option>
            <option value="TARDE">TARDE</option>
            <option value="NOITE">NOITE</option>
            <option value="INTEGRAL">INTEGRAL</option>
            </select>
            <br/><br/>
            Situação da Turma:<span style="color: red">*</span><br/>
            <select id="situacaoTurma" name="situacaoTurma" required>
            <option value=""></option>  
            <option value="CADEIRA VAGA / PROF. EFETIVO">CADEIRA VAGA / PROF. EFETIVO</option>
            <option value="CADEIRA VAGA / CTD">CADEIRA VAGA / CTD</option>
            <option value="CADEIRA VAGA / ACUMULAÇÃO">CADEIRA VAGA / ACUMULAÇÃO</option>
            <option value="CADEIRA VAGA / SEM PROFESSOR">CADEIRA VAGA / SEM PROFESSOR</option>
            </select>
            <br/><br/>          
            <input type="submit" id="enviar" name="enviar" value="Finalizar" />
        </form>
    </body>
</html>
    
asked by anonymous 17.07.2017 / 21:34

2 answers

0

You are setting the value of your option with the regional_id, not regional, as you want. Change the option line to:

<option value="<?php echo $row['regional']; ?>"><?php echo $row['regional']; ?></option>

Editing:

Since you need both information, you can concatenate the values in the value of the option and treat it later in PHP.

No option, do:

<option value="<?php echo $row['id_regional'] . "_" . $row['regional']; ?>"><?php echo $row['regional']; ?></option>

Then in PHP you can loop the values (or whatever you prefer) and get both information.

    
17.07.2017 / 22:04
0

In the original script the question is already very close to a solution I am going to suggest. Because the onchange event is already registered.

When the user chooses the option, assign the option label to a hidden type field.

Example, create a hidden field

<input type="hidden" name="regional" value="">

In the trigger of the on change event, add only 2 lines as shown below

$("#cbx_regional").change(function () {

    // isso aqui pega o valor que você quer.
    var str = $("#cbx_regional option:selected").text(); 

    // Atribui o valor ao campo oculto.
    $("input[name=regional]").val(str );

    // Abaixo segue o script original sem alterar nada.

The advantage here is a cleaner and easier to maintain code.

As you mentioned in the comments yourself, the technique of concatenating the name with the id is valid but makes other functions difficult.

The hidden field can be anywhere because jquery will look for the name and tag. So do not worry about putting it inside the tag <form>

    
17.07.2017 / 23:16