0

Tenho um form que é gerado dinamicamente pelo PHP com valores vindos do banco de dados. Em uma parte do form tenho um grupo de infos que vai gerar uma repetição de parte do form onde tenho um conjunto de radios buttons. Quero que quando o user escolha um dos dois, esconda um div e apareça outro. Quando tenho só um bloco (loop) funciona o problema aparece quando tenho mais de um bloco no loop. Segue código PHP e em seguida o JQuery que fiz.

Esse é o bloco que o for loop gera.

<?php for ($i = 0; $i < $data['partsCount']; $i++) :
                ?>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="service_id">Serviço</label>
                            <input type="text" class="form-control" name="service" value="<?=$data['services'][$i]->name; ?>" disabled />
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="type_id">Tipo</label>
                            <input type="text" class="form-control" name="type" value="<?=$data['types'][$i]->name; ?>" disabled />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="amount">Quantidade</label>
                            <input type="number" name="amount" id="amount" class="form-control" value="<?=$data['parts'][$i]->amount; ?>" disabled />
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="value">Valor Unitário</label>
                            <input type="text" name="value" id="value" class="form-control <?=(!empty($data['value_err'])) ? 'is-invalid' : ''; ?>" value="<?=$data['parts'][$i]->value; ?>" disabled />
                            <span class="invalid-feedback"><?=$data['value_err']; ?></span>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="value">Valor Total</label>
                            <input type="text" name="total" value="<?=$data['parts'][$i]->valueTotal; ?>" class="form-control" disabled />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <hr />
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="status1" name="status[]" class="custom-control-input" value="2" checked>
                            <label class="custom-control-label" for="status1">Aprovado</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="status2" name="status[]" class="custom-control-input" value="3">
                            <label class="custom-control-label" for="status2">Reprovado</label>
                        </div>
                    </div>
                </div>
                <div id="rejected-<?=$i; ?>" class="row my-4">
                    <div class="col">
                        <label for="desc">Motivo para a não aprovação do orçamento</label>
                        <textarea name="reject_notes[]" id="editor1" class="form-control form-control-lg <?=(!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
                    </div>
                </div>
                <div id="accepted-<?=$i; ?>" class="row my-4">
                    <div class="col-4">
                        <label for="data_out">Data de Entrega</label>
                        <div class="form-group">
                            <div class="input-group input-group-lg date">
                                <input type="text" name="delivery_date[]" class="form-control datetimepicker-input" id="datetimepicker<?=$i; ?>" />
                                <div class="input-group-append">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <label for="desc">Caminho para as artes</label>
                        <input type="text" class="form-control" name="path_files[]" id="">
                        <label for="desc">Caminho para a PM/RM</label>
                        <input type="text" class="form-control" name="path_pm[]" id="">
                        <label for="desc" class="mt-3">Descritivo e orientações de criação</label>
                        <textarea name="accept_notes[]" id="editor2" class="form-control form-control-lg <?=(!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
                    </div>
                </div>
                <?php endfor;?>

Como podem ver, tenho os input radio que são os status1 e status2 (Aprovado e Reprovado) o que esta visível é o div com id accept, caso o user queira reprovar o orçamento, quero que o div accepted fique como hide e mostre o div com id rejected.

Aqui esta o JQuery

$('#status1').click(function () {
    $('div[id^="accepted"]').show('slow');
    $('div[id^="rejected"]').hide('slow');
  });

  $('#status2').click(function () {
    $('div[id^="accepted"]').hide('slow');
    $('div[id^="rejected"]').show('slow');
  });

Como falei, quando tenho só 1 bloco funciona mais quando tenho mais de um ele buga, os blocos pegam a escolha de outros blocos. Não estou sabendo fazer como isolar a escolha.

1
  • 1
    pq não usa uma classe para esses divs? seria muito fácil pegar todos com a mesma classe 23/06/2021 às 21:33

1 Resposta 1

0

Consegui resolver o problema que estava tendo. Fiz assim.

Bloco PHP onde tem toda a funcionalidade de escolha que dispara o show/hide

<div class="row">
   <div class="col">
      <div class="status-a custom-control custom-radio custom-control-inline">
      <input type="radio" id="status-a<?=$i?>" name="status-<?=$i?>[]" class="custom-control-input" value="2" checked>
      <label class="custom-control-label" for="status-a<?=$i?>">Aprovado</label>
      </div>
      <div class="status-b custom-control custom-radio custom-control-inline">
      <input type="radio" id="status-b<?=$i?>" name="status-<?=$i?>[]" class="custom-control-input" value="3">
      <label class="custom-control-label" for="status-b<?=$i?>">Reprovado</label>
      </div>
   </div>
   </div>
   <div id="rejected-<?=$i?>" class="row my-4">
      <div class="col">
      <label for="desc">Motivo para a não aprovação do orçamento</label>
      <textarea name="reject_notes[]" id="editor1" class="form-control form-control-lg <?php echo (!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
      </div>
   </div>
   <div id="accepted-<?=$i?>" class="row my-4">
      <div class="col-4">
      <label for="data_out">Data de Entrega</label>
      <div class="form-group">
      <div class="input-group input-group-lg date">
      <input type="text" name="delivery_date[]" class="form-control datetimepicker-input" id="datetimepicker<?php echo $i; ?>" />
      <div class="input-group-append">
         <div class="input-group-text"><i class="fa fa-calendar"></i></div>
         </div>
      </div>
      </div>
      </div>
      <div class="col-12">
         <label for="desc">Caminho para as artes</label>
         <input type="text" class="form-control" name="path_files[]" id="">
         <label for="desc">Caminho para a PM/RM</label>
         <input type="text" class="form-control" name="path_pm[]" id="">
         <label for="desc" class="mt-3">Descritivo e orientações de criação</label>
         <textarea name="accept_notes[]" id="editor2" class="form-control form-control-lg <?php echo (!empty($data['text_err'])) ? 'is-invalid' : ''; ?>" cols="80" rows="10"></textarea>
      </div>
   </div>

Primeiro criei um input (hidden) que passa o valor total do loop do retorno do banco de dados. E no loop do PHP apliquei a o valor de $i da interação para criar ID unicos. Depois fiz um for loop com javascript e assim consegui isolar os IDs à serem selecionados.

Código JQuery

let partsCount = document.getElementById('data-count').value;
  console.log(partsCount);
  for (let i = 0; i < partsCount; i++) {
    $('#status-a' + i).click(function () {
      $('#accepted-' + i).show('slow');
      $('#rejected-' + 1).hide('slow');
      console.log('Click: accepted-' + i);
    });

    $('#status-b' + i).click(function () {
      $('#accepted-' + i).hide('slow');
      $('#rejected-' + i).show('slow');
      console.log('Click: rejected-' + i);
    });
  }

Obrigado a todos pela ajuda.

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 .