Show div / form when user selects an option

Question

Show div / form when user selects an option

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I would like when the person chooses one of the options of the select to appear the form as the code says. And also that when one form appeared the other would have 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><divclass="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>

javascript html

asked by anonymous 27.06.2018 / 19:06

4 answers

2

If you use jQuery, use it in the whole code. And you can simplify your code this way:

$(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><divclass="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>

27.06.2018 / 19:24

0

Instead:

  $(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;
                };
    });

Try:

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

27.06.2018 / 19:15

0

Create a class to add the display block when inserted in the element, and leave all with display none, when doing test, you remove class from all elements and ad only on the element you want.

27.06.2018 / 19:15

How to display field values of two classes in a DataGridView? [duplicate] Fonts are not displayed when used with JSF

score 2 · Accepted Answer

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>

The javascript by itself says it all, in jquery there are explanatory comments

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><divclass="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>

NOTE: form ids have been renamed