I have a form with radio buttons, and when I select the radio buttons it will appear / hide the fields I want.
So much for beauty, but if I select an option on and then mute the radio button, that field will add, but does not clear the value chosen on it, so if you send the form, the value is passed, even the field being hidden.
Would anyone know how to clear the selected option from?
I have tried with .empty()
, but then it deletes all values from.
form:
<div class="form-group" id="gr-003">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Vencimento da 1ª parcela <small><b>(dia)</b></small> <span class="required">*</span></small></label>
<div class="col-md-3 col-sm-3 col-xs-12">
<select class="form-control col-md-7 col-xs-12 select2_single forma" tabindex="-1" id="select-custom-field3" name="custom_field[account][3]">
<option value="" id="vazio"></option>
<?php
$b = array(5,15); // ######## DIAS PARA PAGAMENTO
foreach($b as $key => $value){
?>
<option value="<?php echo $value;?>" <?php if($value == $vvencimento){ echo ' selected="selected"'; } ?> ><?php echo $value;?></option>
<?php } ?>
</select>
</div>
And jQuery:
if (this.checked && this.value == '3') {
$("#gr-004").show();
$("#gr-002").hide();
$("#gr-003").hide();
$("#select-custom-field3").empty().append("#gr-003");
Thank you in advance!
#### EDITIONFollow the completed form:
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Forma de pagamento <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-1" value="1" <?php echo ($vformapagamento == '1')?'checked':'';?> > Boleto Conta Um
<br />
<input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-2" value="2" <?php echo ($vformapagamento == '2')?'checked':'';?> > Cartão Conta Um
<br />
<input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-3" value="3" <?php echo ($vformapagamento == '3')?'checked':'';?> > Espécie <small><b>(R$)</b></small>
<br />
<input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-4" value="4" <?php echo ($vformapagamento == '4')?'checked':'';?> > Depósito/Transferência
<br />
<input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-5" value="5" <?php echo ($vformapagamento == '5')?'checked':'';?> > Cheque
<br />
</div>
</div>
<div class="form-group" id="gr-002">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Qtde. Parcelas <span class="required">*</span><br><small>Caso seja pagamento à vista, selecione 1</small> </small></label>
<div class="col-md-3 col-sm-3 col-xs-12">
<select class="form-control col-md-7 col-xs-12 select2_single forma" tabindex="-1" id="select-custom-field2" name="custom_field[account][2]">
<option></option>
<?php
for($a=1; $a<=12; $a++){
?>
<option value="<?php echo $a;?>" <?php if($a == $vqtdeparcelas){ echo ' selected="selected"'; } ?> ><?php echo $a;?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group" id="gr-003">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Vencimento da 1ª parcela <small><b>(dia)</b></small> <span class="required">*</span></small></label>
<div class="col-md-3 col-sm-3 col-xs-12">
<select class="form-control col-md-7 col-xs-12 select2_single forma" tabindex="-1" id="select-custom-field3" name="custom_field[account][3]">
<option value="" id="vazio"></option>
<?php
$b = array(5,15); // ######## DIAS PARA PAGAMENTO
foreach($b as $key => $value){
?>
<option value="<?php echo $value;?>" <?php if($value == $vvencimento){ echo ' selected="selected"'; } ?> ><?php echo $value;?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group" id="gr-004">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Data do recebimento<span class="required">*</span></label>
<div class="col-md-3 col-sm-3 col-xs-12">
<input type="text" class="form-control col-md-7 col-xs-12 forma" name="custom_field[account][4]" id="input-custom-field4" value="<?php echo $vdatarecebimento; ?>" data-inputmask="'mask' : '99/99/9999'">
<br>
</div>
</div>
And the full jQuery:
$(document).ready(function() {
$("#gr-002").hide();
$("#gr-003").hide();
$("#gr-004").hide();
$('input:radio[name="custom_field[account][1]"]').on("change", function() {
if (this.checked && this.value == '1') {
$("#gr-002").show();
$("#gr-003").show();
$("#gr-004").hide();
} if (this.checked && this.value == '2') {
$("#gr-002").show();
$("#gr-003").show();
$("#gr-004").hide();
} if (this.checked && this.value == '3') {
$("#gr-004").show();
$("#gr-002").hide();
$("#gr-003").hide();
$("#select-custom-field3").val('');
} if (this.checked && this.value == '4') {
$("#gr-004").show();
$("#gr-002").hide();
$("#gr-003").hide();
} if (this.checked && this.value == '5') {
$("#gr-002").show();
$("#gr-003").show();
$("#gr-004").hide();
}
});
});