Solved: How to change the content of a select list based on a date selected from a JavaScript date picker?

Here's the scenario - I have a form. Part of that form has a calendar where a person selects a date to pickup the printed flyers they are ordering. That date picker is followed by 2 select lists, where they select where and when they want to pick the flyers up. The wrinkle is that Saturday pickup is available at select locations and the Saturday hours are different from weekday hours. Knowing that our volunteers can't be relied on to figure it out for themselves, management wants to have a different set of options for pickup location and time should someone pick a Saturday.

None of that is difficult except for the fact that I can't seem to get an event to fire after the date has been selected. We're using one of Matt Kruse's javascript calendars as the picker (www.mattkruse.com/javascript/calendarpopup/). It uses an onclick to populate a read-only text field with the selected date. I've attached the calendar code - and a working mockup with the surrounding fields that I refer to here. It's not pretty but it does work.

I have tried everything I can think of to get that date value. I can't add another event after the date selection script because the date has not been written to the field yet, so I'm always a click behind. Adding an onchange event to the text field that takes the date doesn't fire anything either. The only thing that I did get to work was to get the date from the following select lists with an onclick. But, they show their original content when first selected and then change to the new content - which is not exactly what I would want.

So, hopefully this is a bit clear. Thanks in advance for all the help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/CalendarPopup.js"></script>
<script type="text/javascript">
	var now = new Date();
	now.setDate(now.getDate() + 13);

	var cal14 = new CalendarPopup("calendarDiv");
	cal14.addDisabledDates(null,formatDate(now,"yyyy-MM-dd"));
	cal14.addDisabledDates("11/24/2011","11/25/2011","12/25/2011");
	cal14.setDisabledWeekDays(0);
</script>
</head>
<body>
<form>
<p>&nbsp;</p>
<table>
<tr>
<td width="165" class="formLabelRequired" id="pickupDateLabel"><label for="pickupDate">Pick Up Date:</label></td>
<td width="160"><input type="text" name="pickupDate" id="pickupDate" class="medField"></td>
<td width="245" id="cal14"><a href="#" onclick="cal14.select(document.forms[0].pickupDate,'anchor14','MM/dd/yyyy');return false;" title="" name="anchor14" id="anchor14"><img src="img/calendar.gif" alt="Click this calendar to choose a date." width="40" height="21" border="0" align="left"/></a></td>
</tr>
<tr>
<td class="formLabelRequired" id="pickupTimeLabel"><label for="pickupTime">Pick Up Time:</label></td>
<td colspan="2">
<select name="pickupTime" id="pickupTime">
<option value="">-- Select a Pickup time --</option>
<option value="N/A - Not Applicable">N/A - Not Applicable</option>
<option value="Morning (9am - 11am)">Morning (9am - 11am)</option>
<option value="Lunch (11am - 1pm)">Lunch (11am - 1pm)</option>
<option value="Afternoon (1pm - 5pm)">Afternoon (1pm - 5pm)</option>
<option value="Other (Will call to schedule)">Other (Will call to schedule)</option>
</select>
</td>
</tr>
</table>
<div id="calendarDiv" style="position:absolute;visibility:hidden;background-color:#fff;"></div>
</form>
</body>
</html>

Open in new window

calendarPopup.js

How to change the content of a select list based on a date selected from a JavaScript date picker?

Premium Content

Premium Content

Why Experts Exchange?

Ask ANY Question

Did You Know?