populate times left with select boxes
I have a form that has a drop down menu for both a starting time plus an ending time.
The range of times is from 7:00am until 6:00pm, with a default start time at 07:30am an default end time at 04:00pm.
What I'm hoping to achieve through jQuery /Ajax is if the default start time is change to say 10:00am then the end time box would remove every time prior to 10:00am and only show from 10:15am until 6:00pm.
The range of times is from 7:00am until 6:00pm, with a default start time at 07:30am an default end time at 04:00pm.
What I'm hoping to achieve through jQuery /Ajax is if the default start time is change to say 10:00am then the end time box would remove every time prior to 10:00am and only show from 10:15am until 6:00pm.
<div id="row">
<div id="left">
<strong>Start Time:</strong>
</div>
<div id="right">
<?php
$start = strtotime('07:00 am');
$end = strtotime('06:00 pm');
$startDefault = $today . ' 07:30 AM';
$startDefault = strtotime($startDefault);
$postedStart = $today . ' ' . $_POST['startTime'];
$postedStart = strtotime($postedStart);
echo '<select name="startTime" class="fieldclasssm">';
for ($i = $start; $i <= $end; $i += 900)
{
echo '<option value = "'.date('h:i A', $i).'"'; if(isset($submitRequest) && $i == $postedStart) { echo "Selected = 'SELECTED'"; } elseif(!isset($submitRequest) && $i == $startDefault) { echo "Selected = 'SELECTED'"; } echo '>' . date('h:i a', $i). '</option>';
}
echo '</select>';
?>
</div>
</div>
<div id="row">
<div id="left">
<strong>End Time:</strong>
</div>
<div id="right">
<select name = "endTime" id = "endTime" class="fieldclasssm">
</select>
<?php
$start = strtotime('07:00am');
$end = strtotime('06:00pm');
$default = $today . ' 04:00PM';
$endDefault = strtotime($default);
$postedEnd = $today . ' ' . $_POST['endTime'];
$postedEnd = strtotime($postedEnd);
echo '<select name="endTime" class="fieldclasssm">';
for ($i = $start; $i <= $end; $i += 900)
{
echo '<option value = "'.date('h:i A', $i).'"'; if(isset($submitRequest) && $i == $postedEnd) { echo "Selected = 'SELECTED'"; } elseif(!isset($submitRequest) && $i == $endDefault) { echo "Selected = 'SELECTED'"; } echo '>' . date('h:i a', $i). '</option>';
}
echo '</select>';
?>
</div>
</div>
hielo
What is the actual HTML markup generated by your PHP script? View the browser's source code, copy it, then paste it here.
ASKER
<div id="row">
<div id="left">
<strong>Start Time:</strong>
</div>
<div id="right">
<select name="startTime" class="fieldclasssm"><option value = "07:00 AM">07:00 am</option><option value = "07:15 AM">07:15 am</option><option value = "07:30 AM"Selected = 'SELECTED'>07:30 am</option><option value = "07:45 AM">07:45 am</option><option value = "08:00 AM">08:00 am</option><option value = "08:15 AM">08:15 am</option><option value = "08:30 AM">08:30 am</option><option value = "08:45 AM">08:45 am</option><option value = "09:00 AM">09:00 am</option><option value = "09:15 AM">09:15 am</option><option value = "09:30 AM">09:30 am</option><option value = "09:45 AM">09:45 am</option><option value = "10:00 AM">10:00 am</option><option value = "10:15 AM">10:15 am</option><option value = "10:30 AM">10:30 am</option><option value = "10:45 AM">10:45 am</option><option value = "11:00 AM">11:00 am</option><option value = "11:15 AM">11:15 am</option><option value = "11:30 AM">11:30 am</option><option value = "11:45 AM">11:45 am</option><option value = "12:00 PM">12:00 pm</option><option value = "12:15 PM">12:15 pm</option><option value = "12:30 PM">12:30 pm</option><option value = "12:45 PM">12:45 pm</option><option value = "01:00 PM">01:00 pm</option><option value = "01:15 PM">01:15 pm</option><option value = "01:30 PM">01:30 pm</option><option value = "01:45 PM">01:45 pm</option><option value = "02:00 PM">02:00 pm</option><option value = "02:15 PM">02:15 pm</option><option value = "02:30 PM">02:30 pm</option><option value = "02:45 PM">02:45 pm</option><option value = "03:00 PM">03:00 pm</option><option value = "03:15 PM">03:15 pm</option><option value = "03:30 PM">03:30 pm</option><option value = "03:45 PM">03:45 pm</option><option value = "04:00 PM">04:00 pm</option><option value = "04:15 PM">04:15 pm</option><option value = "04:30 PM">04:30 pm</option><option value = "04:45 PM">04:45 pm</option><option value = "05:00 PM">05:00 pm</option><option value = "05:15 PM">05:15 pm</option><option value = "05:30 PM">05:30 pm</option><option value = "05:45 PM">05:45 pm</option><option value = "06:00 PM">06:00 pm</option></select> </div>
</div>
<div id="row">
<div id="left">
<strong>End Time:</strong>
</div>
<div id="right">
<select name = "endTime" id = "endTime" class="fieldclasssm">
</select>
<select name="endTime" class="fieldclasssm"><option value = "07:00 AM">07:00 am</option><option value = "07:15 AM">07:15 am</option><option value = "07:30 AM">07:30 am</option><option value = "07:45 AM">07:45 am</option><option value = "08:00 AM">08:00 am</option><option value = "08:15 AM">08:15 am</option><option value = "08:30 AM">08:30 am</option><option value = "08:45 AM">08:45 am</option><option value = "09:00 AM">09:00 am</option><option value = "09:15 AM">09:15 am</option><option value = "09:30 AM">09:30 am</option><option value = "09:45 AM">09:45 am</option><option value = "10:00 AM">10:00 am</option><option value = "10:15 AM">10:15 am</option><option value = "10:30 AM">10:30 am</option><option value = "10:45 AM">10:45 am</option><option value = "11:00 AM">11:00 am</option><option value = "11:15 AM">11:15 am</option><option value = "11:30 AM">11:30 am</option><option value = "11:45 AM">11:45 am</option><option value = "12:00 PM">12:00 pm</option><option value = "12:15 PM">12:15 pm</option><option value = "12:30 PM">12:30 pm</option><option value = "12:45 PM">12:45 pm</option><option value = "01:00 PM">01:00 pm</option><option value = "01:15 PM">01:15 pm</option><option value = "01:30 PM">01:30 pm</option><option value = "01:45 PM">01:45 pm</option><option value = "02:00 PM">02:00 pm</option><option value = "02:15 PM">02:15 pm</option><option value = "02:30 PM">02:30 pm</option><option value = "02:45 PM">02:45 pm</option><option value = "03:00 PM">03:00 pm</option><option value = "03:15 PM">03:15 pm</option><option value = "03:30 PM">03:30 pm</option><option value = "03:45 PM">03:45 pm</option><option value = "04:00 PM"Selected = 'SELECTED'>04:00 pm</option><option value = "04:15 PM">04:15 pm</option><option value = "04:30 PM">04:30 pm</option><option value = "04:45 PM">04:45 pm</option><option value = "05:00 PM">05:00 pm</option><option value = "05:15 PM">05:15 pm</option><option value = "05:30 PM">05:30 pm</option><option value = "05:45 PM">05:45 pm</option><option value = "06:00 PM">06:00 pm</option></select> </div>
</div>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Perfect solution! Thank you so much!