0

Estou com um formulário com radio buttons, e quando vou selecionando os radio buttons ele vai aparecendo/escondendo os campos que quero.

Até aí ta beleza, mas, se eu seleciono uma opção no e depois mudo de radio button, aquele campo some, mas, não limpa o valor escolhido nele, então se mandar o formulário, o valor é passado, mesmo o campo estando escondido.

Alguém saberia como limpar a opção selecionada do ? Ja tentei com .empty(), mas aí ele apaga todos os valores do .

formulario:

<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>

E o jQuery:

if (this.checked && this.value == '3') {
$("#gr-004").show();
$("#gr-002").hide();
$("#gr-003").hide();
$("#select-custom-field3").empty().append("#gr-003");

Desde já agradeço!

#### EDIÇÃO

Segue o formulário completo:

<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>

E o jQuery completo:

$(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();
    }
  });
});
7
  • Dei uma resposta à tua pergunta mas fiquei curioso qual a ideia de .append("#gr-003");?
    – Sergio
    Commented 9/06/2017 às 13:32
  • Eu estava tentando somente com o empty(), mas vi em fórum um cara dizendo pra usar o append, entao tentei usar ^^
    – Gabriel
    Commented 9/06/2017 às 13:35
  • Podes mostrar o HTML renderizado e o JS. Assim posso dar uma ajuda a organizar/simplificar esse código.
    – Sergio
    Commented 9/06/2017 às 13:37
  • Editei a pergunta e coloquei o formulario e o jquery completo
    – Gabriel
    Commented 9/06/2017 às 13:48
  • Então cada custom_field[account][1] tem um form-group que pode ter um select ou um input, é isso? e quando um custom_field[account][1] fôr escolhido somente 1 form-group deve ficar visivel certo?
    – Sergio
    Commented 9/06/2017 às 14:08

2 Respostas 2

2

A maneira de apagar o valor do select é usar .val('').

Assim o teu código pode ser:

$(document).ready(function() {
  $("#gr-002").hide();
  $("#gr-003").hide();
  $("#gr-004").hide();

  $('input:radio[name="custom_field[account][1]"]').on("change", function() {

    if (this.value == '1' || this.value == '2' || this.value == '5') {
      $("#gr-002, #gr-003").show();
      $("#gr-004").hide();
    } else {
      $("#gr-004").show();
      $("#gr-002, #gr-003").hide();
      $("#select-custom-field3").val('');
    }

  });
});
6
  • Obrigado pela resposta, mas com val('') ja havia tentado e ele não apaga do valor selecionado, quando volto pro select, o valor ainda esta selecionado
    – Gabriel
    Commented 9/06/2017 às 13:34
  • Sou iniciante com jquery, então só pra constar que fiz certo. #gr-003 é a div a ser escondida, e #select-custom-field3 é o id do select. Esta correto mesmo?
    – Gabriel
    Commented 9/06/2017 às 13:37
  • @Gabriel #gr-002 e #gr-003 serão escondidos. Dá uma olhada aqui: jsfiddle.net/9yfn540j
    – Sergio
    Commented 9/06/2017 às 13:41
  • O que preciso é que limpe o valor quando o campo for escondido, e não quando é clicado algum botão. Não estou entendendo o porque o .val('') não funciona :/
    – Gabriel
    Commented 9/06/2017 às 13:49
  • O problema deve estar fora do jquery, este exemplo também não funcionou -_-
    – Gabriel
    Commented 9/06/2017 às 14:57
1

Se entendi bem sua pergunta você deseja resetar o seu <select> se for isso vou criar um exemplo abaixo.


jQuery(document).ready(function(){

  jQuery('#limpar').click(function(){
    jQuery('#select').prop('selectedIndex',0);
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option>Selecione</option>
  <option>Laranja</option>
  <option>Uva</option>
  <option>Goiaba</option>
</select>
<input type="button" value="limpar select" id="limpar">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .