1

Gostaria de que quando a pessoa escolhesse uma das opções do select aparecesse o formulário conforme diz o código. E também que quando aparecesse um formulário o outro ficasse com display none.

$(document).ready(function() {
  document.getElementById('test').addEventListener('change', function () {

	if (this.value == 2) {
		var style = this.value == 2 ? 'block' : 'none';
		document.getElementById('formContato').style.display = style;
	}; else if (this.value == 3) {
			var style = this.value == 3 ? 'block' : 'none'
			document.getElementById('formRevenda').style.display = style;
		}; else (this.value == 4){
				var style = this.value == 4 ? 'block' : 'none';
				document.getElementById('formCliente').style.display = style;
			};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assunto c-form">
  <label class="lado">
			<select class="text" id="test">
			<option id="trabalhe" value="1">Trabalhe conosco</option>
			<option id="sugestoes" value="2">Sugestões/Reclamações</option>
			<option id="revendas" value="3">Cadastro de Revendas</option>
		  <option id="clientes" value="4">Cadastro de clientes</option>
	  </select>
  </label>
</div>

<form id="formContato" style="display: none;">
  <input type="text">
</form>
 
<form id="formRevenda" style="display: none;">
  <input type="text">
</form>

<form id="formCliente" style="display: none;">
  <input type="text">
</form>

4 Respostas 4

2

Javascript

function showDiv(elem){
  if(elem.value == 1){
      document.getElementById('formContato').style.display = "none";
      document.getElementById('formRevenda').style.display = "none";
      document.getElementById('formCliente').style.display = "none";
  } else if (elem.value == 2) { 
      document.getElementById('formContato').style.display = "block";
      document.getElementById('formRevenda').style.display = "none";
      document.getElementById('formCliente').style.display = "none";
  } else if (elem.value == 3) {
      document.getElementById('formRevenda').style.display = "block";
      document.getElementById('formCliente').style.display = "none";
      document.getElementById('formContato').style.display = "none";
  } else if (elem.value == 4) {
      document.getElementById('formCliente').style.display = "block";
      document.getElementById('formRevenda').style.display = "none";
      document.getElementById('formContato').style.display = "none";
  }

}
<div class="assunto c-form">
  <label class="lado">
			<select class="text" id="test" onchange="showDiv(this)">
			<option id="trabalhe" value="1">Trabalhe conosco</option>
			<option id="sugestoes" value="2">Sugestões/Reclamações</option>
			<option id="revendas" value="3">Cadastro de Revendas</option>
		  <option id="clientes" value="4">Cadastro de clientes</option>
	  </select>
  </label>
</div>

<form id="formContato" style="display: none;">
  <input type="text" placeholder="formContato">
</form>
 
<form id="formRevenda" style="display: none;">
  <input type="text" placeholder="formRevenda">
</form>

<form id="formCliente" style="display: none;">
  <input type="text" placeholder="formCliente">
</form>

O javascript por si só já diz tudo, no jquery há comentários explicativos

Jquery

//ao selecionar um option
$("#test").change(function() {
    //esconde todos os forms cujo valor do id contenha "form"
    $('form[id^="form"]').hide(); 
    //pega o id do option selecionado
    var id = $(this).children(":selected").attr("id");
    //concatena o id acima com "form" para mostrar o form com esse id
    $("#form"+id).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assunto c-form">
      <label class="lado">
    			<select class="text" id="test">
    			<option id="trabalhe" value="1">Trabalhe conosco</option>
    			<option id="sugestoes" value="2">Sugestões/Reclamações</option>
    			<option id="revendas" value="3">Cadastro de Revendas</option>
    		  <option id="clientes" value="4">Cadastro de clientes</option>
    	  </select>
      </label>
    </div>

    <form id="formsugestoes" style="display: none;">
      <input type="text" placeholder="formContato">
    </form>
     
    <form id="formrevendas" style="display: none;">
      <input type="text" placeholder="formRevenda">
    </form>

    <form id="formclientes" style="display: none;">
      <input type="text" placeholder="formCliente">
    </form>

OBS: os ids dos forms foram renomeados

2

Se usa jQuery, use-o no código todo. E você pode simplificar seu código desta forma:

$(document).ready(function() {
   $('#test').on('change', function () {

      $('option', this).show(); // mostra todos os options
      $('form').hide(); // oculta todos os forms
      $('option:selected', this).hide(); // oculta o option selecionado

      var v = $(this).val(); // pega o valor do option selecionado

      if (v == 2) {
         var id_form = '#formContato';
      }else if(v == 3){
         var id_form = '#formRevenda';
      }else if(v == 4){
         var id_form = '#formCliente';
      }

      $(id_form).show(); // mostra o form de acordo com o valor dos ifs acima
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assunto c-form">
  <label class="lado">
			<select class="text" id="test">
			<option id="trabalhe" value="1">Trabalhe conosco</option>
			<option id="sugestoes" value="2">Sugestões/Reclamações</option>
			<option id="revendas" value="3">Cadastro de Revendas</option>
		  <option id="clientes" value="4">Cadastro de clientes</option>
	  </select>
  </label>
</div>

<form id="formContato" style="display: none;">
   Contato
  <input type="text">
</form>
 
<form id="formRevenda" style="display: none;">
   Revenda
  <input type="text">
</form>

<form id="formCliente" style="display: none;">
   Cliente
  <input type="text">
</form>

0

Ao Invés disso:

  $(document).ready(function() {
      document.getElementById('test').addEventListener('change', function () {

        if (this.value == 2) {
            var style = this.value == 2 ? 'block' : 'none';
            document.getElementById('formContato').style.display = style;
        }; else if (this.value == 3) {
                var style = this.value == 3 ? 'block' : 'none'
                document.getElementById('formRevenda').style.display = style;
            }; else (this.value == 4){
                    var style = this.value == 4 ? 'block' : 'none';
                    document.getElementById('formCliente').style.display = style;
                };
    });

Tente:

$( "#test" ).change(function() {
  //Ações
});
0

Cria uma classe para adicionar o display block quando inserida no elemento, e deixa todos com display none, quando if fizer teste, você da remove class de todos elementos e ad apenas no elemento que você quer.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .