1
How do I make the fields come hidden and only appear with a radio selection?
Below I will put the fields and the script I use to hide as I click (what is already working) my problem is, that when I open the forms, the fields are there and I need them to appear only when I select some Button of type Radio
follow:
<script>
$(function(){
$('#aprovadoSim').change(function(){
$('#divWelcome').show();
$('#divObservacoes').hide();
$('#divRetornoCliente').hide();
});
$('#aprovadoNao').change(function(){
$('#divObservacoes').show();
$('#divWelcome').hide();
$('#divRetornoCliente').hide();
});
$('#aprRetornoSim').change(function(){
$('#divWelcome').show();
$('#divObservacoes').hide();
$('#divRetornoCliente').hide();
});
$('#aprRetornoNao').change(function(){
$('#divObservacoes').hide();
$('#divWelcome').hide();
$('#divRetornoCliente').show();
});
});
</script>
HTML
<fieldset id="fs_aprovacao">
<div class="panel panel-truecpa">
<legend></legend><br />
<div class="panel-body">
<div class="col-sm-12 col-sm-offset-2">
<div class="form-group" style="margin: 0 auto;">
<div class="col-sm-6" id="divAprovado">
<label for="aprovado" class="col-sm-8 control-label">Aprovado?</label>
<div class="radio" >
<label> <input type="radio" name="aprovado" id="aprovadoSim" value="SIM" >Sim </label>
<label> <input type="radio" name="aprovado" id="aprovadoNao" value="NAO" checked> Não </label>
</div>
</div>
</div></br>
<div class="form-group" style="margin: 0 auto;">
<div class="col-sm-6" id="divAprRetorno">
<label for="aprRetorno" class="col-sm-8 control-label">Aprovado?</label>
<div class="radio" >
<label> <input type="radio" name="aprovadoRetorno" id="aprRetornoSim" value="SIM" >Sim </label>
<label> <input type="radio" name="aprovadoRetorno" id="aprRetornoNao" value="NAO" > Não </label>
</div>
</div>
</div></br>
<div class="form-group" style="margin: 0 auto;">
<div class="col-sm-8" id="divWelcome">
<label for="nofiticaAdmissao" class="control-label">E-mail de Confirmação:</label>
<select class="form-control" id="nofiticaAdmissao" name="nofiticaAdmissao" dataset="colleague" datasetkey="colleaguePK.colleagueId" datasetvalue="colleagueName"></select>
<input type="hidden" id="colleagueId" name="colleagueId" />
</div>
</div>
<div class="form-group" style="margin: 0 auto;" id="divObservacoes">
<div class="col-sm-8" id="definicaoCliente" >
<label for="observacoes" class="control-label">Observações:</label>
<textarea class="form-control" name="observacoes" id="observacoes" rows="4" ></textarea>
</div>
</div><br/>
<div class="form-group" style="margin: 0 auto;" id="divRetornoCliente">
<div class="col-sm-8" id="definicaoCliente" >
<label for="retornoCliente" class="control-label">Observações:</label>
<textarea class="form-control" name="retornoCliente" id="retornoCliente" rows="4" ></textarea>
</div>
</div><br/>
</div>
</div>
</div>
</fieldset>
Have you ever tried to put in
divWelcome
display:none;
?– JcSaint
Yes, but it didn’t work!
– Karina Pinheiro
they disappear, but when I click on the options that should appear the fields, they do not appear.
– Karina Pinheiro