We help IT Professionals succeed at work.
Get Started

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

saabStory
saabStory asked
on
677 Views
Last Modified: 2012-06-27
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
Comment
Watch Question
This problem has been solved!
Unlock 1 Answer and 4 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE