rudtek rudtek - 2 months ago 7
HTML Question

hide entries in html select field based on another select field

I have 2 select fields in my html form. one is for pick up ready time and one is for latest pickup time.

<label>What is the earliest Pickup time?</label><select name='PickupTime' required>
<option value='' selected='selected'>(Select a Time)</option>
<option value='08:00:00'>8:00 AM</option>
<option value='08:30:00'>8:30 AM</option>
<option value='09:00:00'>9:00 AM</option>
<option value='09:30:00'>9:30 AM</option>
<option value='10:00:00'>10:00 AM</option>
<option value='10:30:00'>10:30 AM</option>
<option value='11:00:00'>11:00 AM</option>
<option value='11:30:00'>11:30 AM</option>
<option value='12:00:00'>12:00 PM</option>
<option value='12:30:00'>12:30 PM</option>
<option value='13:00:00'>1:00 PM</option>
<option value='13:30:00'>1:30 PM</option>
<option value='14:00:00'>2:00 PM</option>
</select>
<label>What is the latest Pickup time?</label><select name='CloseTime' required>
<option value='' selected='selected'>(Select a Time)</option>
<option value='10:00:00'>10:00 AM</option>
<option value='10:30:00'>10:30 AM</option>
<option value='11:00:00'>11:00 AM</option>
<option value='11:30:00'>11:30 AM</option>
<option value='12:00:00'>12:00 PM</option>
<option value='12:30:00'>12:30 PM</option>
<option value='13:00:00'>1:00 PM</option>
<option value='13:30:00'>1:30 PM</option>
<option value='14:00:00'>2:00 PM</option>
<option value='14:30:00'>2:30 PM</option>
<option value='15:00:00'>3:00 PM</option>
<option value='15:30:00'>3:30 PM</option>
<option value='16:00:00'>4:00 PM</option>
<option value='16:30:00'>4:30 PM</option>
</select>


Is there any way to make it so that a user has to select a time for the CloseTime file that is at least 2 hours in the future from the ReadyTime field?

So if the user chose a ready time of 11 am, then the times in teh closetime field would start at 1pm (but still only go to 4:30).

I think this takes javascript from looking around, but i don't know that language at all.

Thanks everyone, I appreciate it.

Answer
<label>What is the earliest Pickup time?</label>
<select name='PickupTime' onChange="updateCloseTime(this)" required>
  <option value='' selected='selected'>(Select a Time)</option>
  <option value='08:00:00'>8:00 AM</option>
  <option value='08:30:00'>8:30 AM</option>
  <option value='09:00:00'>9:00 AM</option>
  <option value='09:30:00'>9:30 AM</option>
  <option value='10:00:00'>10:00 AM</option>
  <option value='10:30:00'>10:30 AM</option>
  <option value='11:00:00'>11:00 AM</option>
  <option value='11:30:00'>11:30 AM</option>
  <option value='12:00:00'>12:00 PM</option>
  <option value='12:30:00'>12:30 PM</option>
  <option value='13:00:00'>1:00 PM</option>
  <option value='13:30:00'>1:30 PM</option>
  <option value='14:00:00'>2:00 PM</option>
</select>
<label>What is the latest Pickup time?</label>
<select name='CloseTime' id="CloseTime" required>
  <option value='' selected='selected'>(Select a Time)</option>
  <option value='10:00:00'>10:00 AM</option>
  <option value='10:30:00'>10:30 AM</option>
  <option value='11:00:00'>11:00 AM</option>
  <option value='11:30:00'>11:30 AM</option>
  <option value='12:00:00'>12:00 PM</option>
  <option value='12:30:00'>12:30 PM</option>
  <option value='13:00:00'>1:00 PM</option>
  <option value='13:30:00'>1:30 PM</option>
  <option value='14:00:00'>2:00 PM</option>
  <option value='14:30:00'>2:30 PM</option>
  <option value='15:00:00'>3:00 PM</option>
  <option value='15:30:00'>3:30 PM</option>
  <option value='16:00:00'>4:00 PM</option>
  <option value='16:30:00'>4:30 PM</option>
</select>

<script>
  function updateCloseTime(PickupTime) {
    var PickupTimeValueSplit = PickupTime.value.split(":");
    PickupTimeValueSplit[0] = Number(PickupTimeValueSplit[0]) + 2;
    var valueToFind = PickupTimeValueSplit.join(":");
    var selectCloseTime = document.getElementById("CloseTime");
    var optionsList = Array.prototype.slice.call(selectCloseTime.options);
    optionsList.forEach(function(element, index, array) {
      if (element.value) {
        if (Number(element.value.replace(/:/g,"")) < Number(valueToFind.replace(/:/g,"")) ) {
          selectCloseTime.options[index].style.display = 'none';
        }
        else {
            selectCloseTime.options[index].style.display = 'block';
        }
      }
    });

  }

</script>