Hide or show field according to selected option

Asked

Viewed 503 times

0

I could use a lot of help. I have a php form ready, but the user requested that after selecting the Requester, the requester name field should appear according to the Requester selected. There are 3 options for applicants (Agency, Corporate, Executive). If it is Agency or Corporate, enables the same name field, if it is Executive enables another field. If it is without identification, does not enable any name option.

Well, I ran a bunch of codes on the board here, but none of them fit my code. My form is divided into 3 php files. I have Index, AJAX where loads the fields with Bootstrap and SQL file where the Selects are in the base.

I’m trying to include the code to hide the field within Ajax.php I will insert below, as is the codeword file, so you can analyze and see where I am missing.

    <?php
    header('Content-Type: text/html; charset=ISO-8859-1');
    include 'classificador_Eventos_sql2.php';
    if(!isset($_SESSION)){session_start();}

    $seccion = $_POST["seccion"];
    @$cliente = $_POST['cliente'];
    @$subcliente = $_POST['subcliente'];
    @$executivo = $_POST['executivo'];
    @$tipo = $_POST['tipo'];
    @$subtipo = $_POST['subtipo'];
    @$iata = $_POST['iata'];
    @$nomeiata = $_POST['nomeiata'];

    if($seccion == "carregarForm"){ carregarForm();}
    if($seccion == "carregarSubcliente"){ carregarSubcliente($cliente);}
    if($seccion == "carregarSubtipo"){ carregarSubtipo($tipo);}
    if($seccion == "carregarIATA"){ carregarIATA($iata);}
    if($seccion == "guardar"){ guardar($cliente, $subcliente, $tipo, $subtipo, $iata, $nomeiata, $executivo);}


function carregarForm(){

    $tipos = obtiene_filtros('tipo', null);
    $clientes = obtiene_Cliente('cliente', null);
    $filtro_Executivo = obtiene_Executivo();


    $out = '<div class="panel panel-default col-lg-offset-4 col-lg-4 col-md-offset-3 col-md-6 col-sm-offset-3 col-sm-6 col-xs-8 col-xs-offset-2" style="padding:0px;">
                <div class="panel-body" id="bodyForm">
                    <form class="form-horizontal">';
                        $out.='<fieldset>
                            <legend>Classificador Eventos</legend>';
                            if(true){ //NomeOperador
                                $out.='<div class="form-group">
                                    <label for="filtro_NomeOperador" class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label">Usuário</label>
                                    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7" style="padding-left:0px;">
                                        <input type="text" class="form-control" id="filtro_Nome" disabled value="'.$_SESSION['nomeGuerra'].'">
                                    </div>
                                </div>';
                            }
                            if(true){//Atendimento
                                $out.='<div class="form-group">
                                    <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label" for="filtro_Cliente">Atendimento</label>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding-left:0px;">
                                        <select class="form-control" id="filtro_Cliente" onchange="carregarSubcliente();">';
                                            foreach ($clientes as $t){
                                                $out.='<option value="'.utf8_decode($t['valor']).'">'.utf8_decode($t['valor']).'</option>';
                                            }
                                        $out.='</select>
                                    </div>
                                </div>';
                            }
                            if(true){ //Solicitante
                                $out.='<div class="form-group" id="div_subcliente">
                                    <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label" for="filtro_Subcliente">Solicitante</label>
                                    <div class="col-lg-9 col-md-8 col-sm-9 col-xs-9" style="padding-left:0px;">
                                        <select class="form-control" id="filtro_Subcliente"></select>
                                    </div>
                                </div>';
                            }
                            if(true){//Executivo
                            $out.='<fieldset>
                                <div class="form-group" id="div_Executivo">
                                    <label for="filtro_Executivo" class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label">Executivo</label>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding-left:0px;">
                                        <select class="form-control" id="filtro_Executivo">';
                                            foreach ($filtro_Executivo as $b){
                                                $out.='<option value="'.utf8_decode($b['valor']).'">'.utf8_decode($b['valor']).'</option>';
                                            }
                                        $out.='</select>
                                    </div>
                                </div>
                                </fieldset>';
                            }
                            if(true){ //IATA
                                $out.='<div class="form-group" id="div_IATA">
                                    <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label" for="filtro_IATA">IATA / OAC</label>
                                    <div class="col-lg-3 col-md-3 col-sm-9 col-xs-9" style="padding-left:0px;">
                                        <input type="text" class="form-control" id="filtro_IATA" >
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-9 col-xs-9" style="padding-left:0px;" id="div_IATA_nome">
                                        <input type="text" class="form-control" id="filtro_IATA_nome" disabled >
                                    </div>
                                </div>
                                <div class="form-group hidden" id="div_alertIATA">
                                    <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label"></label>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-9 alert-sm alert-danger">
                                        O IATA/OAC deve ser um código válido.
                                    </div>
                                </div>';
                            }

Here is the Function that loads the Requester:

    function carregarSubcliente($cliente){

$filtro_atendimento = obtiene_Cliente('subcliente',utf8_decode($cliente));

$out = '<label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label" for="filtro_Subcliente">Solicitante</label>
<div class="col-lg-9 col-md-8 col-sm-9 col-xs-9" style="padding-left:0px;">
    <select class="form-control" id="filtro_Subcliente" >';
        foreach ($filtro_atendimento as $a){
            $out .= "<option value='".utf8_decode($a['valor'])."'>".utf8_decode($a['valor'])."</option>";
        }
    $out.='</select>
</div>';
echo $out;
}

I tried to create a Function onchange, inside this last Function that brings the Requester data, but it is not working. I named it "Oculparcampos()" Follow the code I’m trying to use:

function carregarSubcliente($cliente){

$filtro_atendimento = obtiene_Cliente('subcliente',utf8_decode($cliente));

$out = '<label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label" for="filtro_Subcliente">Solicitante</label>
<div class="col-lg-9 col-md-8 col-sm-9 col-xs-9" style="padding-left:0px;">
    <select class="form-control" id="filtro_Subcliente" onchange="OcultarCampos()">';
        foreach ($filtro_atendimento as $a){
            $out .= "<option value='".utf8_decode($a['valor'])."'>".utf8_decode($a['valor'])."</option>";
        }
        $out.='</select>
    </div>';
echo $out;
}


function OcultarCampos(){

    var valor = document.getElementById("filtro_Subcliente").value;
valor.onchange = function(){
                    if (valor === "AGÊNCIA") {
                    document.getElementById("div_IATA").classList.remove("hidden");
                    document.getElementById("div_IATA_nome").classList.remove("hidden");
                    document.getElementById("div_Executivo").classList.add("hidden");
                    } 
                    else if {(valor === "EXECUTIVO")
                    document.getElementById("div_IATA").classList.add("hidden");
                    document.getElementById("div_IATA_nome").classList.add("hidden");
                    document.getElementById("div_Executivo").classList.remove("hidden");
                    }
                    else if {(valor === "CORPORATIVO")
                    document.getElementById("div_IATA").classList.remove("hidden");
                    document.getElementById("div_IATA_nome").classList.remove("hidden");
                    document.getElementById("div_Executivo").classList.add("hidden");
                    }
                    else {
                    document.getElementById("div_IATA").classList.add("hidden");
                    document.getElementById("div_IATA_nome").classList.add("hidden");
                    document.getElementById("div_Executivo").classList.add("hidden");
                        }

}}

By entering the part of hiding fields, the page is bringing the error below:

Parse error: syntax error, Unexpected 'var' (T_VAR) in D: www augusta Classifying servicesEventos2 classified_Eventos_ajax2.php on line 204.

Line 204 is this: var value = Document.getElementById("filtro_Subclient"). value;

Thank you for your personal attention. Any help is welcome.


I fixed the previous error using the script below, but the fields are not hidden.

function OcultarCampos(){

        $out.='<script>

                    var valor  = document.getElementById("filtro_Subcliente").value;
                    if (valor === "AGÊNCIA") {
                    document.getElementById("div_IATA").classList.remove("hidden");
                    document.getElementById("div_IATA_nome").classList.remove("hidden");
                    document.getElementById("div_Executivo").classList.add("hidden");
                    } 
                    else if {(valor === "EXECUTIVO")
                    document.getElementById("div_IATA").classList.add("hidden");
                    document.getElementById("div_IATA_nome").classList.add("hidden");
                    document.getElementById("div_Executivo").classList.remove("hidden");
                    }
                    else if {(valor === "CORPORATIVO")
                    document.getElementById("div_IATA").classList.remove("hidden");
                    document.getElementById("div_IATA_nome").classList.remove("hidden");
                    document.getElementById("div_Executivo").classList.add("hidden");
                    }
                    else {
                    document.getElementById("div_IATA").classList.add("hidden");
                    document.getElementById("div_IATA_nome").classList.add("hidden");
                    document.getElementById("div_Executivo").classList.add("hidden");
                    }
                }
            </script>';
    echo $out;
        }

No error, but keeps showing all fields, as print below: inserir a descrição da imagem aqui

  • It seems to me that you are mixing PHP code with Javascript, hence the error quoted. This function OcultarCampos() is JS and is inside the PHP code block.

  • Got it Sam.. Thanks for the info. How would I make this code only in PHP? Pq everything I found on the net was in Javascript :/

  • Hide fields has to be in JS even, unless you do an Ajax to pull the fields you want every time there is an onchange. It seems to me that this function I mentioned should be among the tags <script></script> in the HTML of the page.

  • I put script at the beginning and at the end as suggested, I had to put a $out before the script to avoid error. No error now, but the fields are not hidden, they are all available..

  • I don’t know if I should use some other way to hide, like display None, or visibility "Hidden"..

No answers

Browser other questions tagged

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