Jump to content
Akahs

Liberar elemento ou div ao selecionar uma opção

Recommended Posts

Caros Amigos, 

Estou com uma dúvida que me atormenta tem uma semana e simplesmente travei por não conseguir resolver. 

Tenho um site onde o cliente vai escolher, através de um formulário de registro, se ele vai necessitar ou não de um traslado até o evento. Caso ele escolha "Não", nada acontece. Caso ele escolha "Sim", eu quero que apareça o outro select com as opções de hotéis de onde ele vai se hospedar para pegar o traslado. Pois bem, eis meu código na parte de formulário:

 

<div class="col-md-6">									
	<div class="form-group"> 
		<select class="form-control" name="traslado" id="traslado">
				<option value="">Necessita Traslado?*</option>
				<option value="Sim">Sim</option>
				<option value="Não">Não</option>
		</select>
	</div>
</div>

<div class="col-md-6" id="teste">									
		<div class="form-group" style="display:none;"> 
			<select class="form-control"  name="hotel" id="hotel">
				<option value="0">Se Sim, escolha o Hotel de Origem*</option>
				<option value="SleepIn Jacarei">SleepIn Jacareí</option>
				<option value="Ibis Jacarei">Íbis Jacareí</option>
				<option value="Ibis SJC">Ibis SJC</option>
				<option value="Novotel SJC">Novotel SJC</option>
			</select>
		</div>
</div>

 

Percebam que, ao responder "Sim" para a opção de "Traslado" eu quero que as opções de "Hoteis" apareçam juntamente com o outro grupo de select "form-control". 
Pensei em duas formas de trabalhar:
A primeira seria manipulando a div do "form-control" relativo aos hoteis, ela fica oculta e ao clicar em Sim em "Traslado" ela aparece. (Tentei fazer, sem sucesso.)
A outra seria manipular o style "display:none", enfim, uma idéia que me ocorreu. 
 

Fiz uns códigos em JavaScript porém nenhum funcionou, o que cheguei mais perto foi sumir o formulário todo.

Se alguém puder dar alguma dica e/ou solução ficarei enormemente agradecido. 

Att,

Traslado.png

Share this post


Link to post
Share on other sites

Olá, Akahs. Fiz esse código aqui para esse problema.

// Pega o elemento para escutar a mudança de valor
const translado = document.getElementById('traslado');
// Pega pai do elemento que desejo alterar (poderia ser o proprio elemento tambem)
const hotelParentElement = document.getElementById('hotel').parentElement;

// Adiciona o ouvinte do tipo "change"
translado.addEventListener('change', trasladoElement => {
	// Verifica se o valor eh "Sim", se for, remove a classe que deixa invisivel
  // Se nao for "Sim", adiciona a classe novamente
	if(trasladoElement.target.value === 'Sim') {
  	 hotelParentElement.classList.remove('d-none');
  }
	else {
  	 hotelParentElement.classList.add('d-none');
  }
});

 

Utilizei a própria classe "d-none" do bootstrap para deixar o elemento invisível.

DEMO: https://jsfiddle.net/qkz3d8bp/

Share this post


Link to post
Share on other sites

@Akahs Tenta isso aqui deve funcionar. Eu tbm fiz algumas modificações no html.

 

HTML:

<div class="col-md-6">									
                <div class="form-group"> 
                    <select class="form-control" name="traslado" id="traslado">
                        <option value="false" selected disabled>Necessita Traslado?*</option>
                        <option value="true">Sim</option>
                        <option value="false">Não</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">									
                <div class="form-group" style="display:none;"> 
                    <select class="form-control"  name="hotel" id="hotel">
                        <option value="0" selected disabled>Se Sim, escolha o Hotel de Origem*</option>
                        <option value="SleepIn Jacarei">SleepIn Jacareí</option>
                        <option value="Ibis Jacarei">Íbis Jacareí</option>
                        <option value="Ibis SJC">Ibis SJC</option>
                        <option value="Novotel SJC">Novotel SJC</option>
                    </select>
                </div>
            </div>

Javascript:

            var select1, select2;

            window.onload = function()
            {
                select1 = document.getElementsByName("traslado")[0];
                select2 = document.getElementsByName("hotel")[0];

                select1.addEventListener("change", function()
                {
                    if (this.value == "true")
                    {
                        select2.parentElement.style.display = "block";
                    }
                    else
                    {
                        select2.parentElement.style.display = "none";
                        select2.getElementsByTagName("option")[0].selected = true;
                    }
                });
            }

Caso você queira usar Jquery:

$(function()
            {
                $("[name=traslado]").on("change", function()
                {
                    if($(this).val() == "true")
                    {
                        $($("[name=hotel]").parent()[0]).css("display", "block");
                    }
                    else
                    {
                        $($("[name=hotel]").parent()[0]).css("display", "none");
                        $($("[name=hotel]").children()[0]).prop("selected", true);
                    }
                });
            });

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Thomeny
      Olá pessoal, sou novo no mundo da programação e banco de dados, quer dizer passei vários anos parado em outra área e agora resolvi voltar.
       
      Enfim estou precisando fazer o seguinte:
       
      Tenho dois campos que usa um select (irei colocar logo abaixo) para ambos.
      Esse select traz o resultado iguais para os dois, porém o cliente precisa fazer o seguinte:
       
      Para combobox 1 ao selecionar paciente, esse paciente não apareça no combobox dois porque já foi selecionado.
       
      Como procedo, se puderem ser claros, abaixo segue o select usado em ambos pra trazer a lista de pacientes...
       
      Select Distinct
        PC.PES_COD,
        PC.PES_NOME,
        PF.NASCIMENTO,
        PF.PFI_MAE,
        Concat(PC.PES_COD, ' - ', LTrim(RTrim(PC.PES_NOME)), ' - ', PF.NASCIMENTO, ' - ', LTrim(RTrim(PF.PFI_MAE))) As NOME
      From
        GER_PESSOA PC
        Inner Join
        GER_PESSOA_FISICA PF On (PC.PES_COD = PF.PES_COD)
      Order By
        PC.PES_NOME
    • By JurisCode
      OLÁ A TODOS, Boa tarde. Preciso de ajuda com o seguinte script.
       
      eu tenho uma array que é a seguinte:
       
      array (size=7)   0 => string 'gu' (length=2)   1 => string 'tr' (length=2)   2 => string 'fr' (length=2)   3 => string 'ip' (length=2)   4 => string 'al' (length=2)   5 => string 'po' (length=2)   6 => string 'xa' (length=2) Cada string da array de duas letra é a abreviatura de uma cidade; eu quero fazer uma pesquisa na base da dados para cada sigla dessa para ver qual a cidade correspondente. Como vai ser necessariamente um resultado apenas, eu tive que usar o foreach.
       
      Tipo
      foreach($array as $variavel);         {         $busca = $conn->query("SELECT * FROM tabela WHERE sigla = '$variavel'");         $resultado = $busca->fetch_assoc();         echo ' - '. $resultado['significado_da_sigla'];         } } Não está funcionando perfeitamente, mas imprime apenas o último resultado.
       
      Eu já tentei uma variável para ir acumulando o resultado, tipo
       
      if (empty('$resultado_busca')) {     $resultado_busca = $resultado['significado_da_sigla'];     }     else {     $resultado_busca = $resultado_busca . ' - ' . $resultado['significado_da_sigla'];     } ou seja, se a variável foi vazia (da primeira vez), então vai criar uma variável com o primeiro resultado, se a variável já existir (das outras vezes), então a variável vai ser igual à variavel anteriormente criado adicionando um traço e o próximo resultado.
       
      E depois, em vez de imprimir a variável com fetch_assoc $resultado['significado_da_sigla'] eu imprimiria a variável &resultado_busca, que em cada ciclo iria acumulando os resultados, mas também não está funcionando, essa não imprime nada na tela.
       
      Alguém pode dar uma ajuda?
       
      OBRIGADO, DESDE JÁ
    • By JurisCode
      eu tenho uma array que é a seguinte:
      array (size=7)   0 => string 'gu' (length=2)   1 => string 'tr' (length=2)   2 => string 'fr' (length=2)   3 => string 'ip' (length=2)   4 => string 'al' (length=2)   5 => string 'po' (length=2)   6 => string 'xa' (length=2) eu quero fazer uma pesquisa na base da dados para cada sigla dessa para ver qual o significado correspondente. Como vai ser necessariamente um resultado apenas, não tem motivo para usar o while, mas fazer via foreach.
       
      Tipo
      foreach($array as $variavel); { $busca = $conn->query("SELECT * FROM tabela WHERE sigla = '$variavel'"); $resultado = $busca->fetch_assoc(); echo ' - '. $resultado['significado_da_sigla']; } }  
      Mas tá imprimindo só o último resultado.
    • By asacap1000
      Galera não sei o porque mas n select abaixo eu preciso mostrar o ultimo registro de uma das datas que são lançadas.
      SELECT IO.ID_IN_OUT TICKET, TO_CHAR(IO.TIME_ARRIVAL, 'DD/MM/YYYY HH24:MI') CHEGADA, TO_CHAR(IO.TIME_RELEASE_IN, 'DD/MM/YYYY HH24:MI') LIBERADO, TO_CHAR(IO.TIME_IN, 'DD/MM/YYYY HH24:MI') ENTRADA, SUBSTR(SP.NAME, 0, 18) TRANSPORTADORA, SUBSTR(DR.NAME, 0, 18) MOTORISTA, VE.PLATE PLACA, (SELECT DISTINCT MAX(TOS.PLATZ) DOCA FROM PICKAUF PI, AUFTRAEGE TOS, (SELECT IO.ID_IN_OUT, MAX(IO.TIME_RELEASE_PP) TIME_RELEASE_PP, IOP.DOCUMENT, MAX(IO.TIME_OUT) TIME_OUT FROM IN_OUT IO, IN_OUT_POS IOP WHERE IO.ID_IN_OUT = IOP.ID_IN_OUT --AND IO.ART_IN_OUT IN ('CA', 'CCE', 'CC') AND IO.STAT <> '80' GROUP BY IOP.DOCUMENT, IO.ID_IN_OUT) SAD WHERE PI.CHARGE = TOS.NR_AUF AND SAD.ID_IN_OUT = IO.ID_IN_OUT AND SAD.DOCUMENT(+) = REPLACE(TRANSLATE(TOS.HINW_ZUST, '/-', ' '), ' ') GROUP BY SAD.ID_IN_OUT) DOCA FROM IN_OUT IO, SPEDITEURE SP, VEHICLE VE, TRACTOR TR, DRIVER DR WHERE IO.STAT <> '80' AND IO.TIME_ARRIVAL IS NOT NULL AND TR.ID_TRACTOR = IO.ID_TRACTOR AND DR.ID_DRIVER = IO.ID_DRIVER AND VE.ID_VEHICLE = IO.ID_VEHICLE AND IO.TIME_RELEASE_PP IS NULL AND SP.ID_SPEDITEUR = IO.ID_SPEDITEUR AND IO.ART_IN_OUT IN ('CA', 'CC', 'CCE', 'CV') and rownum = '1' ORDER BY TO_CHAR(IO.TIME_RELEASE_IN, 'DD/MM/YYYY HH24:MI') Neste Select temos as datas de CHEGADA, LIBERADO, ENTRADA. eu preciso mostrar o ultimo registro do LIBERADO. Eu já fiz um max porém não retornou.Ela será utilizada em um telão no pátio de uma empresa.
       
      O telão será desta forma
       

    • By VictorPHP
      Galera preciso de ajuda,
       
      Meu campo no banco de data é data/hora, e preciso ver a hora. Quando eu faço o select me retorna apenas a data. Realizei o debug e vi que esta retornando apenas a data como varchar. Conseguem me ajudar ? 
      Ja tentei diversas conversões de data. To char, To date , Date , Strtotime ... Nada funcionou. Uso PHP 5.6.40 e banco de dados Oracle. Minha necessidade é mostrar a data e hora do evento. Alguem conhece uma solução ? 
       
      Formato no meu banco : 
      25.07.2019 05:33:00
       
      Meu codigo: 
       
      SELECT : 
       
      $sql='SELECT
      tr.tm_prf_act as prf,
      tr.tm_cod_of,
      ev.ev_nom_mac ,
      un.dt_ini_parada, 
      un.dt_fim_parada,
      un.cod_motivo,
      un.cod_mot_despachador 
      FROM unl_trens_parados un,trens tr, elem_via ev
      WHERE un.id_trem_act = tr.tm_id_trm
      AND un.id_sb = ev.ev_id_elm
      AND un.dt_ini_parada > SYSDATE -1
      AND un.id_posto = 2
      AND un.cod_motivo IN (20,28,26,50,15,30)
      AND un.dt_fim_parada IS NOT NULL
      ORDER BY un.dt_ini_parada desc ';
       
      Conexão :
      $stid=oci_parse($ora_conexao,$sql);
      oci_execute($stid);
       
      Chamando a data somente para testar : 
      $teste = oci_result($stid,'DT_INI_PARADA'); --> Estou testando o campo de data 
      echo date('d/m/Y H:m:s', strtotime($teste)); -> Chamando a data
       
      Debug ( Me retorna apenas data "25/07/2019")
      $var = $teste; -> Debugando
      var_dump($var); > Debugando
      die(); > Debugando
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.