Home » Php » php – JS: Disable second Select Option when first Select Option value is "Select Start Time"

php – JS: Disable second Select Option when first Select Option value is "Select Start Time"

Posted by: admin February 25, 2020 Leave a comment

Questions:

based on my question above, the scenario like this:

1) When I click ‘start time’ and select any time, then the ‘end time’ will enable. When I choose any time at ‘end time’, then I click back ‘start time’ and choose “Select Start Time”, the ‘end time’ still enable and still display the value that I choose before. Thus. What I want is I want the ‘end time’ value clear and disabled it.

Below is my current code:

  <div class="form-group">
  <label>Start Time</label>
  <?php get_times( $default = '00:00', $interval = '+5 minutes' ); ?>
  <select class="form-control" id="starttime" name="timeFrom" required>
    <option value="">Select Start Time</option>
    <?php echo get_times(); ?></select>
  </div>
  <div class="form-group">
    <label>End Time</label>
    <?php get_times( $default = '00:00', $interval = '+5 minutes' )?>
    <select class="form-control" id="endtime" name="timeTo" disabled>
      <?php echo get_times(); ?></select>
  </div>

<?php
    function get_times( $default = '00:00', $interval = '+5 minutes' ) {
        $output = '';
        $current = strtotime( '00:00' );
        $end = strtotime( '23:59' );

        while( $current < $end ) {
            $time = date( 'H:i:s', $current );
            $sel = ( $time == $default ) ? ' selected' : '';
            $output .= "<option value=\"{$time}\"{$sel}>" . date( 'H:i', $current ) . '</option>';
            $current = strtotime( $interval, $current );
        }
        return $output;
    }
?>

<script>
    $('#starttime').change(function(){
      var starttime = $(this).val();
      console.log(starttime);
      $('#endtime option').each(function(){
        if($(this).text() < starttime){
          $(this).remove();
        }
      });
      $('#endtime').removeAttr('disabled')
    })
</script>

Can anyone know how to solve it?

How to&Answers:

Even if you made this work the way you are asking, I think you would still have a problem because you are removing options from you endtime select, but you never put them back. So if someone chooses the last option in your starttime select, then chooses “Select Start Time” again, then your endtime select would be empty. So basically you need to add the options back to your endtime select every time your starttime changes, then remove the ones options in your endtime that are less than your starttime.

E.G

https://jsbin.com/poruyuwovo/1/edit?html,js,console,output

In your code it would be something like this.

  <div class="form-group">
  <label>Start Time</label>
  <?php get_times( $default = '00:00', $interval = '+5 minutes' ); ?>
  <select class="form-control" id="starttime" name="timeFrom" required>
    <option value="">Select Start Time</option>
    <?php echo get_times(); ?></select>
  </div>
  <div class="form-group">
    <label>End Time</label>
    <?php get_times( $default = '00:00', $interval = '+5 minutes' )?>
    <select class="form-control" id="endtime" name="timeTo" disabled>
      <?php echo get_times(); ?></select>
  </div>

<?php
    function get_times( $default = '00:00', $interval = '+5 minutes' ) {
        $output = '';
        $current = strtotime( '00:00' );
        $end = strtotime( '23:59' );

        while( $current < $end ) {
            $time = date( 'H:i:s', $current );
            $sel = ( $time == $default ) ? ' selected' : '';
            $output .= "<option value=\"{$time}\"{$sel}>" . date( 'H:i', $current ) . '</option>';
            $current = strtotime( $interval, $current );
        }
        return $output;
    }
?>



 <script id="select_options" type="text/html">
    <?php echo get_times(); ?>
  </script>

<script>
function endtimeUpdate(){
  var $endtime = $('#endtime');
  var starttime = $('#starttime').val();
  console.log(starttime);

  $endtime.find('option').remove();
  $endtime.html($('#select_options').html());

  if(starttime == ''){    
    $endtime.prop('disabled', true);    
  }
  else {
    $endtime.prop('disabled', false);    
     $endtime.find('option').each(function(){
      if($(this).text() < starttime){
        $(this).remove();
      }
    });
  }  
}

$('#starttime').change(endtimeUpdate);
</script>