How to display / hide fields according to selection?

Question

How to display / hide fields according to selection?

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

Follow the code:

function exibir_ocultar(val){
    var cpf = document.getElementById('cpf');
    var nome = document.getElementById('nome');
    var cnpj = document.getElementById('cnpj');
    var razao = document.getElementById('razao');

        if(val == 'pessoa_fisica'){}
            $(cnpj).hide();
            $(razao).hide();
            $(cpf).show();
            $(nome).show();
        }
        else{
            $(cnpj).show();
            $(razao).show();
            $(cpf).hide();
            $(nome).hide();
       	}
};

<select id="tipo_pessoa" onchange="exibir_ocultar(this)">
    <option value="pessoa_fisica">PF</option>
    <option value="pesso_juridica">PJ</option>
</select>
<br /><br />
<div id="cnpj">CNPJ: <br /><input type="number"></div><br />
<div id="razao">Razão Social: <br /><input type="text"></div><br />
<div id="cpf">CPF: <br /><input type="number"></div><br />
<div id="nome">Nome: <br /><input type="text"></div>

javascript jquery

asked by anonymous 26.10.2016 / 00:19

2 answers

2

You can get the selected value of select through the value :

function exibir_ocultar(val) {
  if(val.value == 'pessoa_fisica') {
    document.getElementById('cnpj').style.display = 'none';
    document.getElementById('razao').style.display = 'none';
    document.getElementById('cpf').style.display = 'block';
    document.getElementById('nome').style.display = 'block';
  }
  else {
    document.getElementById('cnpj').style.display = 'block';
    document.getElementById('razao').style.display = 'block';
    document.getElementById('cpf').style.display = 'none';
    document.getElementById('nome').style.display = 'none';
  }
};

<select id="tipo_pessoa" onchange="exibir_ocultar(this)">
    <option value="pessoa_fisica">PF</option>
    <option value="pesso_juridica">PJ</option>
</select>
<br /><br />
<div id="cnpj">CNPJ: <br /><input type="number"></div><br />
<div id="razao">Razão Social: <br /><input type="text"></div><br />
<div id="cpf">CPF: <br /><input type="number"></div><br />
<div id="nome">Nome: <br /><input type="text"></div>

Another option that you do not need to pass is this for the function:

function exibir_ocultar() {
    var tipo_pessoa = document.getElementById("tipo_pessoa").value;

    if(tipo_pessoa == 'pessoa_fisica') {
      // Código pessoa física...
    }
    else {
      // Código pessoa jurídica...
    }
};

26.10.2016 / 00:47

MySQL is duplicating search result Probabilities with pnorm function R

score 2 · Accepted Answer

function exibir_ocultar(){
    var valor = $("#tipo_pessoa").val();

    if(valor == 'pessoa_fisica'){
         $("#cnpj").hide();
         $("#razao").hide();
         $("#cpf").show();
         $("#nome").show();
     } else {
         $("#cnpj").show();
         $("#razao").show();
         $("#cpf").hide();
         $("#nome").hide();
     }
};

In% of% you remove select in method call.