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 Herberto Silva
      Olá
      Estou com uma dificuldade em elaborar um select de forma que verifique um campo data, (com uma atribuição de uma variável $current_date = date('Y-m-d');) caso exista essa data o select posicione-se no registo, neste caso no registo que contém a data igual a $current_date, mantendo os restantes registos da tabela disponíveis
    • By leandrodesouza14
      Tenho uma duvida.
       
      Estou recebendo dados de um formulário HTML através do método POST. Um desses dados provem de um campo Select com diversos Options.
       
      Eu vou inserir os dados recebidos dos diversos imputs em varias tabelas, qual das tabelas vai depender do que o usuário selecionar no Select.
       
      Por exemplo: Se a pessoa selecionar BMW no Select, os dados do restante do formulário devem ser inseridos na tabela BMW. / Se a pessoa selecionar Fiat no Select, os dados do restante do formulário devem ser inseridos na tabela Fiat.
       
      O codigo que desenvolvi ate agora foi esse:
       
      <form action="cadastrodeveiculo.php" method="post" name="cadastroveiculo"> <p> Fabricante: <select name="marca"> <option value="audi" >Audi</option> <option value="bmw">BMW</option> <option value="chevrolet">Chevrolet</option> <option value="citroen">Citroen</option> <option value="fiat">Fiat</option> <option value="ford">Ford</option> <option value="hyundai">Hyundai</option> <option value="honda">Honda</option> <option value="jeep">Jeep</option> <option value="mb">Mercedes-Benz</option> <option value="mitsubishi">Mitsubishi</option> <option value="nissan">Nissan</option> <option value="peugeot">Peugeot</option> <option value="renault">Renault</option> <option value="toyota">Toyota</option> <option value="volkswagen">Volkswagem</option> </select> Modelo: <input type="text" id="modelo" name="modelo" maxlength="50"> Versao: <input type="text" id="versao" name="versao" maxlength="100"> Ano: <input type="text" id="ano" name="ano" maxlength="12"> Link: <input type="text" id="link" name="link" maxlength="300"> </p> <input class="submit" type="submit" name="cadastrar" value="Cadastrar"> </form> O codigo PHP, da pagina cadastroveiculo.php e o seguinte:
       
      <?php $conn = mysqli_connect("localhost", "leandro", "123", "afxveiculos"); if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } echo "Connected successfully"; $tabela = $_POST['marca']; $modelo = $_POST['modelo']; $versao = $_POST['versao']; $ano = $_POST['ano']; $link = $_POST['link']; $sql = "INSERT INTO (modelo, versao, ano, link) VALUES ('$modelo', '$versao', '$ano', '$link')"; if (mysqli_query($conn, $sql)) { echo "New record created successfully"; } else { echo "Error: " . $sql . "<br>" . mysqli_error($conn); } mysqli_close($conn); header("location: cadastroesquema.html"); ?> Deixei o Insert Into vazio pois não sei que colocar la.
       
      Obrigado galera!
    • By Gildvan Arley
      <?php $consulta = $conexao->query('SELECT * FROM nomevip '); while ($exibir=$consulta->fetch(PDO::FETCH_ASSOC)){ ?> Olá
      Como posso remover 13 ids desse SELECT do 1 ao 13 
    • By gustavo491
      Tenho esse modelo de banco de dados com algumas informações cadastradas e preciso buscar atráves de um select  os Campeonato e Modalidades que uma pessoa não tem vinculo, porém já tentei de diversas maneira e não consegui exito, máximo que consegui foi buscar as modalidades que não existe ninguém cadastrado.

    • By lordstarlight
      Olá amigos,
       
      Tenho uma tabela Character Set: UFT8 e  Collation: uft8_general_ci.
      Não consigo fazer um select onde possa ignorando maiúsculas, minúsculas, acentos e caracteres especiais.
      Já varri a internet e nada no original ou adaptado funcionou.
      Ignora maiúsculas e minúsculas ainda dá certo mais quanto vai para acentuação fico perdido.
       
      Tentei algo como:
      "SELECT DISTINCT * FROM livros WHERE tituloLivro LIKE _utf8'%".$termo."%' COLLATE utf8_unicode_ci OR tituloLivro LIKE '%".$termo."%'" Usei uft8_encode e uft8_decode na variável termo e ainda nada.
       
      Alguma dica?!
       
      Valeu
×

Important Information

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