Create tag select by checking Jquery Checkbox

Question

I don’t know if what I’m thinking is viable.

I have a form that dynamically creates several checkboxes with the dates of the month. However, I need when the user checks one of these dates to create two select tags, one referring to the time and the other to the minutes.

The way I tried to do, I created several selects and at the time of passing the request it came all values of selects even those I had not selected.

I don’t know if there can be any other solution for what I want. That actually just pass the pro request values of the dates I selected.

In the image below I did using Hidden in the fields and only enabling those that are marked however, as in the second image shows it passes all other values.

Looking at the image below you can notice what I don’t want.

Is there any way that it doesn’t happen?

The way I thought was to check some date he create those specific selects and only pass the required values in the request.

Follow my code for better understanding.

@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

I hope it’s clear what I want to do.

Answer 1

You can create dynamic selects on Divs with id tempo{{$i}}. For that, leave the div empty:

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

Also remove this one onclick of the div dt_adicional{{$i}}:

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

Instead of using onclick, will be used a Event Handler for when the checkbox changes status.

The code below will add the selects in the respective Ivs when checking the box, and remove when being passed:

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

In a simple test of 2 checkboxes, the result was:

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

Then just relate each date to your time, where the date of the index [0], for example, has the hours and minutes also in the indexes [0] arrays horas and minutos.