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