0
I’m trying to display some fields of a form and partly I can make it work, but not completely even already reviewing the code.
I need to show the inputs with the labels and hide inputs with their labels. When the select is from Tipo Pessoa Física shall hide the inputs and their labels of Pessoa Jurídica and show the fields of Pessoa Física and in the same way when selecting Pessoa Jurídica hide inputs from Pessoa Física.
Had put the IDs in the main div, it even works, but it messes me up the validation of the fields, see:
// 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> Physical Person Fields to be displayed: Name, Date of Birth and CPF
Fields of the Juridic Person that must be displayed: Name, Social Reason, Name Fantasy, State Registration and CNPJ
I’m putting the page in development here: Page of the Register
Hello @Maycon F. Castro, show, thank you so much for your help, can you explain what has been done? It will surely help many others, big hug.
– adventistapr
Friend that function . Closest('element') takes the element above what you gave the initial selector in this case your input field, then it takes the div with all your children and shows and strip the screen, as you were already doing.
– Maycon F. Castro
Thanks @Maycon F. Castro, you helped so much.
– adventistapr