I'm trying to display some fields of a form and in part I get it to work, but not quite even reviewing the code.
I need to show the inputs with the labels and hide the inputs with their labels . When the select is of Tipo Pessoa Física it should hide the inputs and their labels from Pessoa Jurídica and display the Pessoa Física fields and the same way when selecting Pessoa Jurídica hide Pessoa Física inputs.
I have put the IDs in the main div, it even works, but I mess 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><divclass="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><scriptsrc="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><scriptsrc="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><scriptsrc="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><scriptsrc="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><scriptsrc="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>FieldsofPhysicalPersontobedisplayed:Name,DateofBirthandCPF
FieldsoftheJudicialPersontobedisplayed:Name,CompanyName,FancyName,StateRegistrationandCNPJ
Iamputtingthepageunderdevelopmenthere: Register page