• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 208
  • Last Modified:

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.

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

Open in new window

times.png
0
t3chguy
Asked:
t3chguy
  • 2
  • 2
1 Solution
 
hieloCommented:
What is the actual HTML markup generated by your PHP script?  View the browser's source code, copy it, then paste it here.
0
 
t3chguyAuthor Commented:
<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>

Open in new window

0
 
hieloCommented:
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/REC-html40/strict.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
.row{width:50%;float:left;}
.row div.left{float:left;width:5em;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(function(){
	$('#startTime').on('change',function(){
		var str='';
		for( var i=this.selectedIndex+1, limit=this.options.length; i<limit; ++i)
		{
			str+='<option value="'+this.options[i].value+'">'+this.options[i].text+'</option>';
		}
		$('#endTime').get(0).options.length=0;
		$(str).appendTo('#endTime');
	});
});
</script>
</head>
<body>
		<div class="row">
			<div class="left">
				<strong>Start Time:</strong>
			</div>
			<div class="right">
				<select id="startTime" 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 class="row">
			<div class="left">
				<strong>End Time:</strong>
			</div>
			<div class="right">
				<select id="endTime" 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>
</body>
</html>

Open in new window

0
 
t3chguyAuthor Commented:
Perfect solution!  Thank you so much!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now