0

Não sei se isso que estou pensando é viável.

Tenho um formulário que cria dinamicamente vários checkbox com as datas do mês. Porém, preciso que quando o usuário der o check em uma dessas datas criar duas tags select, uma referente as horas e outro aos minutos.

Da maneira que eu tentei fazer, eu criava vários selects e na hora de passar o request ele vinha todos os valores dos selects até mesmo os que eu não havia selecionado.

Não sei se pode haver outra solução para o que eu quero. Que na verdade é só passar os valor pro request das datas que eu selecionei.

Na imagem abaixo eu fiz usando hidden nos campos e só habilitando os que estão marcados porém, conforme na segunda imagem mostra ele passa todos os outros valores.

inserir a descrição da imagem aqui

Olhando a imagem abaixo é possível notar o que eu não quero.

inserir a descrição da imagem aqui

Será que existe alguma forma de isso não acontecer?

O jeito que eu pensei foi ao dar check em alguma data ele criar aqueles selects específicos e só passar no request os valores necessários.

Segue meu código para melhor compreendimento.

@foreach ($datas as $i=>$data)
    <div class="col-md-3">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="{{$data}}" id="dt_adicional{{$i}}" name="dt_adicional[]" onclick="Mudarestado('tempo{{$i}}')">
            <label class="form-check-label" for="dt_adicional{{$i}}">
                {{$data}}
            </label>
        </div>
        <div id="tempo{{$i}}" style="display:none">
            <select class="form-control form-control-sm" id="horas{{$i}}" name="horas[]">
                <option value="" selected>Horas</option>
                @for($j=0; $j <= 120; $j++)
                    @if($j<10)
                        <option value="{{'00'.$j}}">{{'00'.$j}}</option>
                    @elseif($j<100)
                        <option value="{{'0'.$j}}">{{'0'.$j}}</option>
                    @else
                        <option value="{{$j}}">{{$j}}</option>
                    @endif
                @endfor
            </select>
            <select class="form-control form-control-sm" id="minutos{{$i}}" name="minutos[]">
                <option value="" selected>Min</option>
                @for($k=0; $k <= 59; $k++)
                    @if($k<10)
                        <option value="{{'0'.$k}}">{{'0'.$k}}</option>
                    @else
                        <option value="{{$k}}">{{$k}}</option>
                    @endif
                @endfor
            </select>
        </div>
    </div>
@endforeach

Espero que tenha ficado claro o que quero fazer.

0

1 Resposta 1

1

Pode criar selects dinâmicos nas divs com id tempo{{$i}}. Para isso, deixe a div vazia:

<div id="tempo{{$i}}" style="display:none"></div>

Remova também esse onclick da div dt_adicional{{$i}}:

onclick="Mudarestado('tempo{{$i}}')"

Em vez de usar onclick, será usado um event handler para quando o checkbox mudar de estado.

O código abaixo irá adicionar os selects nas respectivas divs ao checar o box, e remover ao ser deschecado:

<script>
$(function(){

   $("input[id^=dt_adicional]").on("change", function(){

      // pega o número da id
      var indice = this.id.match(/\d+/)[0];
      var sels = '', j_, k_;

      if($(this).is(":checked")){

         sels += '<select class="form-control form-control-sm" name="horas[]">'
         +'<option value="" selected>Horas</option>';

         for(var j=0; j <= 120; j++){

            j_ = j;

            if(j < 10){ j_ = "00"+j }
            else if(j < 100){ j_ = "0"+j }

            sels += '<option value="'+ j_ +'">'+ j_ +'</option>';
         }

         sels += '</select>'
         +'<select class="form-control form-control-sm" name="minutos[]">'
         +'<option value="" selected>Min</option>';

         for(var k=0; k <= 59; k++){

            k_ = k;

            if(k < 10){ k_ = "0"+k }

            sels += '<option value="'+ k_ +'">'+ k_ +'</option>';
         }

         sels += '</select>';


         $("#tempo"+indice).html(sels).show();


      }else{

         // esvazia a div e esconde
         $("#tempo"+indice).empty().hide();

      }

   });

});
</script>

Em um teste simples de 2 checkboxes, o resultado foi:

"dt_adicional" => array(2) {
  [0]=>
  string(10) "05/01/2019" <---*
  [1]=>                       |
  string(10) "10/01/2019"     |
}                             |
"horas" => array(2) {         |
  [0]=>                       |
  string(3) "010" <-----------*
  [1]=>                       |
  string(3) "018"             |
}                             |
"minutos" => array(2) {       |
  [0]=>                       |
  string(2) "09" <------------*
  [1]=>
  string(2) "12"
}

Aí é só relacionar cada data com seu tempo, onde a data do índice [0], por exemplo, possui as horas e os minutos também nos índices [0] das arrays horas e minutos.

1
  • Muito obrigado Sam, funcionou perfeitamente. Commented 14/01/2019 às 12:40

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 .