Values of the input radio remain inside an array

Question

Values of the input radio remain inside an array

Navigation

#1 by (1 votes)

0

I do not know if it was clear in my question, but I have the following form:

WhenonemorefieldisaddedandwhenisitselectedforexampleCollaredChildren?inthesecondfield,itunchecksthefirst.Seebelow:

HowcanImakesurethatbyalwaysselectingtheothercreatedfields,thepreviousonesremainwiththeirvaluesmarked?

<tableborder="0" width="100%">
<tr class='linhas'>
  <td>
  <table border="0" width="100%">
    <tr>
    <td  style="padding: 5px"><input type="text" name="NomePAX[]" class="form-control" placeholder="Nome do pax" value=""></td>
    <td  style="padding: 5px">
      <select name="TipoDocumento" class="form-control">
        <option>Tipo de documento</option>
      </select>
    </td>
    <td  style="padding: 5px">
      <input type="text" name="RGPessoaAutorizada[]" class="form-control" placeholder="RG da pessoa autorizada" value="">
      <!-- <input type="text" name="CPF" id="cpf" class="form-control" data-inputmask="'alias': '999.999.999-99'"> -->
    </td>
  </tr>
  <tr>
  <td style="padding: 5px">
    <label>Crianças de colo? <small>até 06 anos</small></label><br>
    <input type="radio" name="CriancasColo[]" value="Sim"> Sim
    <input type="radio" name="CriancasColo[]" value="Não"> Não
  </td>
  <td  style="padding: 5px">
    <label>Crianças entre 06 e 12 anos?</label><br>
    <input type="radio" name="Criancas6e12[]" value="Sim"> Sim
    <input type="radio" name="Criancas6e12[]" value="Não"> Não
  </td>
  <td  style="padding: 5px">
    <label>Adolescentes entre 12 e 18 anos?</label><br>
    <input type="radio" name="Adolescentes[]" value="Sim"> Sim
    <input type="radio" name="Adolescentes[]" value="Não"> Não
  </td>
</tr>
</table>
</td>
    <td style="padding: 5px"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
<tr>
    <td colspan="3"><button type="button" class="adicionarCampo btn btn-primary" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Adicionar mais passageiros</button></td>
</tr>
</table>

JQuery

<script type="text/javascript">
     $(function () {
       function removeCampo() {
             $(".removerCampo").unbind("click");
             $(".removerCampo").bind("click", function () {
                if($("tr.linhas").length > 1){
                     $(this).parent().parent().remove();
                }
             });
       }
       $(".adicionarCampo").click(function () {
         if ($('.linhas').length < 15) {
             novoCampo = $("tr.linhas:first").clone();
             novoCampo.find('input[type="text"]').val("");
             novoCampo.find('select').val("");
             novoCampo.insertAfter("tr.linhas:last");
             removeCampo();
           }
       });
     });
 </script>

jquery

asked by anonymous 03.11.2018 / 16:54

1 answer

Problem running session start! output function giving error syntax

score 1 · Accepted Answer

What happens is that when you check a RADIO option, it will be unchecked when you select another RADIO option with same NAME .

You have to change the name of inputs RADIO of each field created

In the inputs type RADIO of your HTML replace the brackets in name with the digit 0 (zero) and add class to each group as indicated in the HTML code below

<tr>
  <td style="padding: 5px">
    <label>Crianças de colo? <small>até 06 anos</small></label><br>
    <input type="radio" class="CriancasColo" name="CriancasColo0" value="Sim"> Sim
    <input type="radio" class="CriancasColo" name="CriancasColo0" value="Não"> Não
  </td>
  <td  style="padding: 5px">
    <label>Crianças entre 06 e 12 anos?</label><br>
    <input type="radio" class="Criancas6e12" name="Criancas6e120" value="Sim"> Sim
    <input type="radio" class="Criancas6e12" name="Criancas6e120" value="Não"> Não
  </td>
  <td  style="padding: 5px">
    <label>Adolescentes entre 12 e 18 anos?</label><br>
    <input type="radio" class="Adolescentes" name="Adolescentes0" value="Sim"> Sim
    <input type="radio" class="Adolescentes" name="Adolescentes0" value="Não"> Não
  </td>
</tr>

In function adicionarCampo add these lines

var x = ($('.linhas').length);
novoCampo.find('.CriancasColo').attr('name', 'CriancasColo' + x);
novoCampo.find('[name*=CriancasColo]').prop('checked',false);
novoCampo.find('.Criancas6e12').attr('name', 'Criancas6e12' + x);
novoCampo.find('[name*=Criancas6e12]').prop('checked',false);
novoCampo.find('.Adolescentes').attr('name', 'Adolescentes' + x);
novoCampo.find('[name*=Adolescentes]').prop('checked',false);

Add Field Function

$(".adicionarCampo").click(function () {
    if ($('.linhas').length < 15) {
        novoCampo = $("tr.linhas:first").clone();
        novoCampo.find('input[type="text"]').val("");

        var x = ($('.linhas').length);
        novoCampo.find('.CriancasColo').attr('name', 'CriancasColo' + x);
        novoCampo.find('[name*=CriancasColo]').prop('checked',false);

        novoCampo.find('.Criancas6e12').attr('name', 'Criancas6e12' + x);
        novoCampo.find('[name*=Criancas6e12]').prop('checked',false);

        novoCampo.find('.Adolescentes').attr('name', 'Adolescentes' + x);
        novoCampo.find('[name*=Adolescentes]').prop('checked',false);

        novoCampo.find('select').val("");
        novoCampo.insertAfter("tr.linhas:last");
        removeCampo();
    }
});

NOTE: If you check the Radios inputs before creating new fields, these new fields will come with the inputs marked as above. To avoid this we add .prop('checked',false); to each new field created.