How to display/hide fields according to selection?

Asked

Viewed 12,233 times

3

Follows 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

2 answers

2


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 the select you remove the this in the method call.

2

You can get the selected value from select through the attribute 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 is not necessary to pass the 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...
    }
};

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.