How to display/hide fields according to selection?

The following code:

https://jsfiddle.net/vv15pjLv/ or:

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>

The following code:

What issues are you having with this code?

Display/hide fields according to selection not work.

Solution found:

<form id="myForm">
  <select id="tipo_pessoa"">
    <option value="pessoa_fisica">PF</option>
    <option value="pesso_juridica">PJ</option>
  </select>
  
  <div id="cnpj">
  <br />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>

</form>
$('#tipo_pessoa').on('change', function() {
  if ($(this).val() == 'pessoa_fisica') {
    $('#cnpj').hide();
    $('#razao').hide();
    $('#cpf').show();
    $('#nome').show();
  } else {
    $('#cnpj').show();
    $('#razao').show();
    $('#cpf').hide();
    $('#nome').hide();
  }
});

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.