dimanche 8 octobre 2017

Display PHP content in Form with Javascript Checkboxes Toggle

I have a php form that users can submit specific times.

I made a nice drop down for the days, and once a user clicks a day the [From-To] shows up.

If a user would like to edit I need to display all this information again.

Lets say in the array Monday appears, I need Monday checkbox to be selected with the values, and the rest of the checkboxes to be unselected.

Also, what happens if the user unselects and doesn't want that date anymore how can I choose to not add that to db?

I also need all the other ones closed if they're not selected.

Here is a test.

<?php
  $times = array('Mon' => array('from' => '04:25',
                                'to'   => '08:30'),

                'Tue'  => array('from' => '12:25',
                                'to'   => '05:02')
                              );
                              print_r($times);
 ?>




<div class="form-inline">
  <div class="row">
      <div class="col-md-12 specificHolder">

            <div class="row">
             <div class="col-md-2 col-md-offset-5">
               <h2>Specific Time<h2><input type="checkbox" <?php if (!empty($times)) { ?> checked <?php } ?> class="make-switch specificTime input-lg">
             </div>
            </div>


                <div class="specific_on" <?php if (empty($times)) { ?> style="display:none" <?php } ?>>
                  <div class="row">
                    <div class="col-md-3 col-md-offset-5">
                          <input type="checkbox" class="form-control monday input-lg" <?php if ($day == 'Mon') { ?> checked <?php }?> > <h5>Monday</h5>
                        <div class="monday_to_from" style="display:none">
                          <input type="text" class="form-control timepicker" <?php if ($day == 'Mon') {  ?> value="<?php echo $time['from'] ?>" <?php } ?>>
                          <input type="text" class="form-control timepicker"  <?php if ($day == 'Mon') {  ?> value="<?php echo $time['to'] ?>" <?php } ?>>
                        </div>
                        <br>
                         <input type="checkbox" class="form-control tuesday input-lg"> <h5>Tuesday</h5>
                        <div class="tuesday_to_from" style="display:none">
                          <input type="text" class="form-control timepicker">
                          <input type="text" class="form-control timepicker">
                        </div>
                        <br>
                         <input type="checkbox" class="form-control wednesday input-lg"> <h5>Wednesday</h5>
                        <div class="wednesday_to_from" style="display:none">
                          <input type="text" class="form-control timepicker">
                          <input type="text" class="form-control timepicker">
                        </div>
                        <br>
                         <input type="checkbox" class="form-control thursday input-lg"> <h5>Thursday</h5>
                        <div class="thursday_to_from" style="display:none">
                          <input type="text" class="form-control timepicker">
                          <input type="text" class="form-control timepicker">
                        </div>
                        <br>
                         <input type="checkbox" class="form-control friday input-lg"> <h5>Friday</h5>
                        <div class="friday_to_from" style="display:none">
                          <input type="text" class="form-control timepicker">
                          <input type="text" class="form-control timepicker">
                        </div>
                        <br>
                         <input type="checkbox" class="form-control saturday input-lg"> <h5>Saturday</h5>
                        <div class="saturday_to_from" style="display:none">
                          <input type="text" class="form-control timepicker">
                          <input type="text" class="form-control timepicker">
                        </div>
                         <br>
                         <input type="checkbox" class="form-control sunday input-lg"> <h5>Sunday</h5>
                        <div class="sunday_to_from" style="display:none">
                          <input type="text" class="form-control timepicker">
                          <input type="text" class="form-control timepicker">
                        </div>

                    </div>
                  </div>
               </div>
        </div>
    </div>
</div>

JS:

The javascript I cut it down to only Monday click just for simplicity here.

  $('.specificTime').on('switchChange.bootstrapSwitch', function() {
    $(this).parents('.specificHolder').find('.specific_on').toggle('slow');
  });



  $('.monday').on('click', function(){
   $(this).parents('.specificHolder').find('.monday_to_from').toggle('slow');
    });




Aucun commentaire:

Enregistrer un commentaire