Avatar of saabStory
saabStoryFlag for United States of America asked on

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
JavaScript

Avatar of undefined
Last Comment
Sudhindra A N

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Sudhindra A N

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
saabStory

Superb!
ASKER
saabStory

This is why I keep coming back here.  I know that  slogging through that file is just way above and beyond - I only included it to make the example work.  This is more appreciated than than you can know.  Thanks so much!
Sudhindra A N

You are welcome and thanks for the points.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy