0

Estou tentando exibir alguns campos de um form e em parte consigo fazer funcionar, mas não completamente mesmo já revisando o código. Preciso mostrar os inputs com os labels e ocultar os inputs com seus labels. Quando o select for do Tipo Pessoa Física deve ocultar os inputs e seus labels da Pessoa Jurídica e mostrar os campos da Pessoa Física e do mesmo modo quando selecionar Pessoa Jurídica ocultar os inputs da Pessoa Física. Tinha coloca os IDs na div principal, até funciona, mas me bagunça a validação dos campos, vejam:

// CAMPOS DO FORMULÁRIO
$(document).ready(function() {
	$('#CNPJ').hide();
	$('#RazaoSocial').hide();
	$('#NomeFantasia').hide();
	$('#InscricaoEstadual').hide();
	$('#Tipo').change(function(){
		var valorEscolhido 	= $('#Tipo option:selected').text();
		if (valorEscolhido == 'Pessoa Física'){
			$('#CNPJ').hide();
			$('#DataNascimento').show();			
			$('#CPF').show();
			$('#Nome').val('');
			$('#RazaoSocial').hide();
			$('#NomeFantasia').hide();
			$('#InscricaoEstadual').hide();
		}else{
			$('#CPF').hide();
			$('#DataNascimento').hide();
			$('#CNPJ').show();			
			$('#RazaoSocial').val('');			
			$('#Nome').val('');
			$('#RazaoSocial').show();
			$('#NomeFantasia').show();
			$('#InscricaoEstadual').show();
		}
	});

});	
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/fontawesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/prettyphoto/css/prettyPhoto.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/owl-carousel2/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/owl-carousel2/assets/owl.theme.default.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/animate/animate.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />	

    <!-- Theme CSS -->
    <link href="https://rendamaislingerie.com.br/n-renda/assets/css/theme.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/css/tema-renda-mais.css" rel="stylesheet" id="theme-config-link">

    <!-- Head Libs -->
    <script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/modernizr.custom.js"></script>     
     <div class="container">
         <div class="row">
            <div class="col-md-3">
               <div class="form-group">
                  <label for="Tipo">Tipo *</label>                
                  <select id="Tipo" name="Tipo" class="form-control">
                     <option value="0">Selecione</option>
                     <option value="fisica">Pessoa Física</option>
                     <option value="juridico">Pessoa Jurídica</option>
                  </select>
               </div>
            </div>
            <div class="col-md-4">
               <div class="form-group">
                  <label for="Nome">Nome *</label>
                  <input id="Nome" type="text" name="Nome" class="form-control">                
               </div>
            </div>
            <div class="col-md-2">
               <div class="form-group">
                  <label for="DataNascimento">Data Nascimento *</label>
                  <input id="DataNascimento" type="text" name="DataNascimento" class="form-control">                
               </div>
            </div>
            <div class="col-md-3" id="CPF">
               <div class="form-group">
                  <label for="CPF">CPF *</label>
                  <input id="CPF" type="text" name="CPF" class="form-control">                
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-3">
               <div class="form-group">
                  <label for="RazaoSocial">Razão Social *</label>
                  <input id="RazaoSocial" type="text" name="RazaoSocial" class="form-control">                
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="NomeFantasia">Nome Fantasia *</label>
                  <input id="NomeFantasia" type="text" name="NomeFantasia" class="form-control">                
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="InscricaoEstadual">Inscrição Estadual *</label>
                  <input id="InscricaoEstadual" type="text" name="InscricaoEstadual" class="form-control">                
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="CNPJ">CNPJ *</label>
                  <input id="CNPJ" type="text" name="CNPJ" class="form-control">                
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-5">
               <div class="form-group">
                  <label for="Endereco">Endereço *</label>
                  <input id="Endereco" type="text" name="Endereco" class="form-control">                
               </div>
            </div>
            <div class="col-md-2">
               <div class="form-group">
                  <label for="Numero">Número *</label>
                  <input id="Numero" type="text" name="Numero" class="form-control">                
               </div>
            </div>
            <div class="col-md-2">
               <div class="form-group">
                  <label for="Complemento">Complemento *</label>
                  <input id="Complemento" type="text" name="Complemento" class="form-control">                
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="Referencia">Referência *</label>
                  <input id="Referencia" type="text" name="Referencia" class="form-control">                
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-5">
               <div class="form-group">
                  <label for="Bairro">Bairro *</label>
                  <input id="Bairro" type="text" name="Bairro" class="form-control">                
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="Cidade">Cidade *</label>
                  <input id="Cidade" type="text" name="Cidade" class="form-control">                
               </div>
            </div>
            <div class="col-md-2">
               <div class="form-group">
                  <label for="UF">UF *</label>
                  <input id="UF" type="text" name="UF" class="form-control">                
               </div>
            </div>
            <div class="col-md-2">
               <div class="form-group">
                  <label for="CEP">CEP *</label>
                  <input id="CEP" type="text" name="CEP" class="form-control">                
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-1">
               <div class="form-group">
                  <label for="DDDTelefone">DDD *</label>
                  <input id="DDDTelefone" type="text" name="DDDTelefone" class="form-control">                
               </div>
            </div>
            <div class="col-md-5">
               <div class="form-group">
                  <label for="Telefone">Telefone *</label>
                  <input id="Telefone" type="text" name="Telefone" class="form-control">                
               </div>
            </div>
            <div class="col-md-1">
               <div class="form-group">
                  <label for="DDDCelular">DDD *</label>
                  <input id="DDDCelular" type="text" name="DDDCelular" class="form-control">                
               </div>
            </div>
            <div class="col-md-5">
               <div class="form-group">
                  <label for="Celular">Celular *</label>
                  <input id="Celular" type="text" name="Celular" class="form-control">                
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-4">
               <div class="form-group">
                  <label for="Email">Email *</label>
                  <input id="Email" type="text" name="Email" class="form-control">                
               </div>
            </div>
            <div class="col-md-4">
               <div class="form-group">
                  <label for="Senha">Senha *</label>
                  <input id="Senha" type="text" name="Senha" class="form-control">                
               </div>
            </div>
            <div class="col-md-4">
               <div class="form-group">
                  <label for="ConfirmaSenha">Confirme Senha *</label>
                  <input id="ConfirmaSenha" type="text" name="Senha" class="form-control">                
               </div>
            </div>
         </div>
         <div class="msgResult" style="padding: 10px;"></div>
         <div class="buttons">
            <a class="btn btn-theme btn-theme-transparent" id="CriarConta">ADICIONAR</a>
         </div>
      </div>
      
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/jquery/jquery-1.11.1.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/superfish/js/superfish.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/prettyphoto/js/jquery.prettyPhoto.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/owl-carousel2/owl.carousel.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/jquery.sticky.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/jquery.easing.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/jquery.smoothscroll.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/smooth-scrollbar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>      

Campos das Pessoa Física que devem ser exibidos: Nome, Data de Nascimento e CPF

Campos da Pessoa Júridica que devem ser exibidos: Nome, Razão Social, Nome Fantasia, Inscrição Estadual e CNPJ

Estou colocando a página em desenvolvimento aqui: Página do Cadastro

1 Resposta 1

2

// CAMPOS DO FORMULÁRIO
$(document).ready(function() {
	$('#CNPJ').closest('div').hide();
	$('#RazaoSocial').closest('div').hide();
	$('#NomeFantasia').closest('div').hide();
	$('#InscricaoEstadual').closest('div').hide();
	$('#Tipo').change(function(){
		var valorEscolhido 	= $('#Tipo option:selected').text();
		if (valorEscolhido == 'Pessoa Física'){
            debugger
			$('#CNPJ').closest('div').hide();
			$('#DataNascimento').closest('div').show();			
			$('#CPF').closest('div').show();
			$('#Nome').val('');
			$('#RazaoSocial').closest('div').hide();
			$('#NomeFantasia').closest('div').hide();
			$('#InscricaoEstadual').closest('div').hide();
		}else{
			$('#CPF').closest('div').hide();
			$('#DataNascimento').closest('div').hide();
			$('#CNPJ').closest('div').show();			
			$('#RazaoSocial').val('');			
			$('#Nome').val('');
			$('#RazaoSocial').closest('div').show();
			$('#NomeFantasia').closest('div').show();
			$('#InscricaoEstadual').closest('div').show();
		}
	});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/fontawesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/prettyphoto/css/prettyPhoto.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/owl-carousel2/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/owl-carousel2/assets/owl.theme.default.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/plugins/animate/animate.min.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />	

    <!-- Theme CSS -->
    <link href="https://rendamaislingerie.com.br/n-renda/assets/css/theme.css" rel="stylesheet">
    <link href="https://rendamaislingerie.com.br/n-renda/assets/css/tema-renda-mais.css" rel="stylesheet" id="theme-config-link">

    <!-- Head Libs -->
    <script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/modernizr.custom.js"></script>     
     <div class="container">
         <div class="row">
            <div class="col-md-3">
               <div class="form-group">
                  <label for="Tipo">Tipo *</label>                
                  <select id="Tipo" name="Tipo" class="form-control">
                     <option value="0">Selecione</option>
                     <option value="fisica">Pessoa Física</option>
                     <option value="juridico">Pessoa Jurídica</option>
                  </select>
               </div>
            </div>
            <div class="col-md-4">
               <div class="form-group">
                  <label for="Nome">Nome *</label>
                  <input id="Nome" type="text" name="Nome" class="form-control">                
               </div>
            </div>
            <div class="col-md-2">
               <div class="form-group">
                  <label for="DataNascimento">Data Nascimento *</label>
                  <input id="DataNascimento" type="text" name="DataNascimento" class="form-control">                
               </div>
            </div>
            <div class="col-md-3" id="CPF">
               <div class="form-group">
                  <label for="CPF">CPF *</label>
                  <input id="CPF" type="text" name="CPF" class="form-control">                
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-3">
               <div class="form-group">
                  <label for="RazaoSocial">Razão Social *</label>
                  <input id="RazaoSocial" type="text" name="RazaoSocial" class="form-control">                
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="NomeFantasia">Nome Fantasia *</label>
                  <input id="NomeFantasia" type="text" name="NomeFantasia" class="form-control">                
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="InscricaoEstadual">Inscrição Estadual *</label>
                  <input id="InscricaoEstadual" type="text" name="InscricaoEstadual" class="form-control">                
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="CNPJ">CNPJ *</label>
                  <input id="CNPJ" type="text" name="CNPJ" class="form-control">                
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-5">
               <div class="form-group">
                  <label for="Endereco">Endereço *</label>
                  <input id="Endereco" type="text" name="Endereco" class="form-control">                
               </div>
            </div>
            <div class="col-md-2">
               <div class="form-group">
                  <label for="Numero">Número *</label>
                  <input id="Numero" type="text" name="Numero" class="form-control">                
               </div>
            </div>
            <div class="col-md-2">
               <div class="form-group">
                  <label for="Complemento">Complemento *</label>
                  <input id="Complemento" type="text" name="Complemento" class="form-control">                
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="Referencia">Referência *</label>
                  <input id="Referencia" type="text" name="Referencia" class="form-control">                
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-5">
               <div class="form-group">
                  <label for="Bairro">Bairro *</label>
                  <input id="Bairro" type="text" name="Bairro" class="form-control">                
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="Cidade">Cidade *</label>
                  <input id="Cidade" type="text" name="Cidade" class="form-control">                
               </div>
            </div>
            <div class="col-md-2">
               <div class="form-group">
                  <label for="UF">UF *</label>
                  <input id="UF" type="text" name="UF" class="form-control">                
               </div>
            </div>
            <div class="col-md-2">
               <div class="form-group">
                  <label for="CEP">CEP *</label>
                  <input id="CEP" type="text" name="CEP" class="form-control">                
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-1">
               <div class="form-group">
                  <label for="DDDTelefone">DDD *</label>
                  <input id="DDDTelefone" type="text" name="DDDTelefone" class="form-control">                
               </div>
            </div>
            <div class="col-md-5">
               <div class="form-group">
                  <label for="Telefone">Telefone *</label>
                  <input id="Telefone" type="text" name="Telefone" class="form-control">                
               </div>
            </div>
            <div class="col-md-1">
               <div class="form-group">
                  <label for="DDDCelular">DDD *</label>
                  <input id="DDDCelular" type="text" name="DDDCelular" class="form-control">                
               </div>
            </div>
            <div class="col-md-5">
               <div class="form-group">
                  <label for="Celular">Celular *</label>
                  <input id="Celular" type="text" name="Celular" class="form-control">                
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-4">
               <div class="form-group">
                  <label for="Email">Email *</label>
                  <input id="Email" type="text" name="Email" class="form-control">                
               </div>
            </div>
            <div class="col-md-4">
               <div class="form-group">
                  <label for="Senha">Senha *</label>
                  <input id="Senha" type="text" name="Senha" class="form-control">                
               </div>
            </div>
            <div class="col-md-4">
               <div class="form-group">
                  <label for="ConfirmaSenha">Confirme Senha *</label>
                  <input id="ConfirmaSenha" type="text" name="Senha" class="form-control">                
               </div>
            </div>
         </div>
         <div class="msgResult" style="padding: 10px;"></div>
         <div class="buttons">
            <a class="btn btn-theme btn-theme-transparent" id="CriarConta">ADICIONAR</a>
         </div>
      </div>
      
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/jquery/jquery-1.11.1.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/superfish/js/superfish.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/prettyphoto/js/jquery.prettyPhoto.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/owl-carousel2/owl.carousel.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/jquery.sticky.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/jquery.easing.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/jquery.smoothscroll.min.js"></script>
<script src="https://rendamaislingerie.com.br/n-renda/assets/plugins/smooth-scrollbar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/Inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>

Tenta assim amigo, espero ter ajudado.

3
  • Olá @Maycon F. Castro, show, muito obrigado pela ajuda, tem como explicar o que foi feito? Com certeza ajudará muitos outros, grande abraço. Commented 4/10/2018 às 12:30
  • Amigo essa função .closest('elemento') pega o elemento acima do que você deu o seletor inicial nesse caso o seu campo input, então ele pega a div com todo os seus filhos e mostra e tira da tela, como você já estava fazendo. Commented 4/10/2018 às 13:35
  • Valeu @Maycon F. Castro, ajudou demais. Commented 4/10/2018 às 15:06

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 .