How do I modify a dropdown box?

[bruce]

I have 3 dropdown boxes, Month, Day, Year. When I change the month, I
want the contents of the Day dropdown box be adjusted to the correct
days in the new month. I would expect to be able to use an onChange
event on the Month dropdown box. I don't know how to reset and reload
the Day dropdown box.

Can someone refer me to some sample code that does this?

Thanks...

Bruce

 

[Jukka K. Korpela]

I have 3 dropdown boxes, Month, Day, Year.

As usual, a URL would have helped. In particular, it would have helped to
see whether this approach is feasible at all, since that depends on the
intended audience and on the kind of dates to be entered. Note that to the
majority of mankind, it is unnatural to enter a date in that order. But if
the audience is more or less limited to certain northern parts of the
American continent, you might adapt to the odd habits of its inhabitants.

People have addressed the issue of date input design, which is
understandable but mostly off-topic in this group. However, before
considering the programming challenge, you should really first make an
informed decision on the design problem. As a rule, there are two good ways
to read dates:
1) Free text input with some instructions on format. This means that you
need both client-side and server-side code to parse the data and to report
errors.
2) Graphic calendars where the user can just click on a date. These require
nontrivial programming and should be accompanied with some fallback
considerations.

So it isn't easy, and therefore you may consider easy ways of reading dates,
despite the reduced usability. If you label each field properly, the odds of
getting badly wrong data (e.g., July 4th when the user actually meant April
7th and thought he specified that) can probably be reduced to almost zero if
month _names_ (not numbers) are used.

When I change the month, I
want the contents of the Day dropdown box be adjusted to the correct
days in the new month. I would expect to be able to use an onChange
event on the Month dropdown box. I don't know how to reset and reload
the Day dropdown box.

There are several possible approaches. One of them is to dynamically modify
the select element by removing or adding options. As a simpler approach,
with some drawbacks (especially dependency on CSS) is to modify just the
appearance of the options, e.g. setting their display property (in styles)
to 'none' to remove an option from rendering. Yet another approach is to
generate the entire Day dropdown box dynamically after the month has been
selected. In each approach, you would need to consider what happens when the
user changes the month selection - perhaps after having selected day.
(Nasty, isn't it? What should happen if the user selected January 30, then
changed month to February.)

There's yet another tricky issue. How many days are there in February? It
depends on the year, and in this context, we would expect the user to select
year last...

So what I'd suggest is that you let the Day dropdown have options up to 31
and you check later, e.g. at form submission, that the date selected is
possible. For good usability, an error should be reported as early as
possible. This would require several event handlers and you would need to
decide what to do in error situations, in addition to reporting the error,
of course.

 

[bruce]

Garrett Smith wrote:
bruce wrote:
I have 3 dropdown boxes, Month, Day, Year. [...]
1) prevents the user from entering data when the browser is unable to
execute the script script.
No, it can be written so that it shows all items by default.
Fortunately, January has 31 days.

That is true for January, yes, but not February.

You miss the point.  January is the first month.  If the first item of a
SELECT element is selected by default by the UA (there is no requirement for
that), then there is no problem with the date control showing 31 days.

The input will need server side validation.

Yes, but that is beside the point.

The format mm/dd/yyyy is also ambiguous.

Read again.

Proper labeling of the fields can avoid ambiguity.

Unambiguous text, too.

And I very much prefer typing one character and then hitting down arrow
key, selecting a previously entered value from the list that my browser
provides by pressing enter.

You realize, of course, that with a single date control that will be all the
dates you have ever entered in that browser (unless limited history
alleviates that problem), provided the control's name is right.  It might
turn out not to be so useful after all.

I also like to be able to copy paste values to and from the input.

For *date* controls?  Well, suit yourself, but it is arguably less
accessible and more ambiguous to let the user type in delimiters.
At least use three (or more) controls instead of just one.

The format must be validated on the server no matter which approach is
used.

However, you cannot validate what you cannot tell from one another, so an
unambiguous date format is mandatory one way or the other.

The ISO-8601 format can be easily understood worldwide

So can other date formats.

and, unlike other formats, it is standardized.

Irrelevant.  The worm must be tasty for the fish, not for the fisherman..  
We've been over this.

and can be unambigously understood, world-wide.
There are other date formats for which this applies, too.
For the label text, include the ISO 8601 Extended format, as below. You
may optionally use placeholder text in the input.
First name:               [_______________]
Last name:                [_______________]
Birth date {YYYY-MM-DD):  [_______________]
Please don't.

Why not?

You've been told already.

[...]

You may want also to use input type="date" with an HTML doctype in the
document.
No, you do not want to.  That type of control is buggy.

Seems to on Opera for dates after 1582.
Exactly.

The default value for this attribute is "text". If the browser does not
recognize an attribute value, HTML 4 recommends that the browser ignore
it.

All browsers I know handle input that way; they seem to follow the
recommendation; dropping the attribute value and using the default value.

That section is not normative.  You are not recommending invalid markup
because user agents can ignore it, are you?

That fact allows HTML 5 to get away with specifying new types while
providing some means to a fallback for the user to enter data.

You want to read that Working Draft for a change and stop citing it as
anything other than work in progress.

F'up2 ciwa.html

PointedEars
--
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

Okay, you have made this into a fantastic discussion, BUT, the
solution as I request, is what I want. My code is for a scheduling
system for the Tennis courts and the Cabana of my Homeowner's
Association consisting of 200 families.

My input page has 9 drop down boxes and a submit button. The date drop
down boxes (Month, Day, Year) are preloaded with "Today's" date. The
remaining drop down boxes are Start time and End time boxes are (Hour,
Minutes, AM/PM). Start time is set to the current time. Minutes are
(0, 15,30, 45) only. End time is set to 2 hours after the start time.
These are loaded on the server using PHP.

My validation is done on the Server using AJAX. If validation fails,
an error message, via AJAX is returned. If validation passes, the data
is stored in the database and a table with all reservations returned,
again via AJAX.

So, I reiterate may request. Can someone direct me to prototype that
shows me how I can change the Day drop down box to the correct number
of days when the month is selected.

Thank you....

Bruce

 

[David Mark]

bruce wrote:
[...]

Okay, you have made this into a fantastic discussion, BUT, the
solution as I request, is what I want. My code is for a scheduling
system for the Tennis courts and the Cabana of my Homeowner's
Association consisting of 200 families.

My input page has 9 drop down boxes and a submit button. The date drop
down boxes (Month, Day, Year) are preloaded with "Today's" date. The
remaining drop down boxes are Start time and End time boxes are (Hour,
Minutes, AM/PM). Start time is set to the current time. Minutes are
(0, 15,30, 45) only. End time is set to 2 hours after the start time.
These are loaded on the server using PHP.

My validation is done on the Server using AJAX. If validation fails,
an error message, via AJAX is returned. If validation passes, the data
is stored in the database and a table with all reservations returned,
again via AJAX.

So, I reiterate may request. Can someone direct me to prototype that
shows me how I can change the Day drop down box to the correct number
of days when the month is selected.

I don't know of any such prototype. but you should ask yourself if you
should be fooling around with Ajax before you've learned how to do basic
DOM manipulation (e.g. populating a SELECT control). I know that must
sound harsh, but it is what you need to hear at this point.

I highly recommend you write the initial version without script. Then,
if it is really necessary, add some scripted enhancements as your
present skills allow.

 

[Garrett Smith]

[snip massive overquote]

[snip signature]

Okay, you have made this into a fantastic discussion, BUT, the
solution as I request, is what I want. My code is for a scheduling
system for the Tennis courts and the Cabana of my Homeowner's
Association consisting of 200 families.

Not a help desk.

My input page has 9 drop down boxes and a submit button. The date drop
down boxes (Month, Day, Year) are preloaded with "Today's" date. The
remaining drop down boxes are Start time and End time boxes are (Hour,
Minutes, AM/PM). Start time is set to the current time. Minutes are
(0, 15,30, 45) only. End time is set to 2 hours after the start time.
These are loaded on the server using PHP.

Nine select boxes. That's wonderful.

My validation is done on the Server using AJAX.

And when that fails?

Based on the question you are asking, you should not be attempting any
Ajax.

The technical solution to what you are asking is not all that hard.

 

[Garrett Smith]

bruce wrote: [...]

I highly recommend you write the initial version without script. Then,
if it is really necessary, add some scripted enhancements as your
present skills allow.

I agree with that.

If you post some code, I'll look at it.

See also Korpela's answer to the question, which, although vastly
different than mine, is insightful and sounds closer to what you
initially asked for.

 

[David Mark]

bruce wrote: [...]

I highly recommend you write the initial version without script. Then,
if it is really necessary, add some scripted enhancements as your
present skills allow.

I agree with that.

Yes, I thought it was sensible advice.

If you post some code, I'll look at it.

See also Korpela's answer to the question, which, although vastly
different than mine, is insightful and sounds closer to what you
initially asked for.

Are you talking to me? I didn't ask for anything.

 

[Garrett Smith]

[...]
Are you talking to me? I didn't ask for anything.

No sorry, I meant that for the OP, bruce.

 

[Gregor Kofler]

Am 2010-05-04 03:11, bruce meinte:

My input page has 9 drop down boxes and a submit button. The date drop
down boxes (Month, Day, Year) are preloaded with "Today's" date. The
remaining drop down boxes are Start time and End time boxes are (Hour,
Minutes, AM/PM). Start time is set to the current time. Minutes are
(0, 15,30, 45) only. End time is set to 2 hours after the start time.
These are loaded on the server using PHP.

My validation is done on the Server using AJAX. If validation fails,
an error message, via AJAX is returned. If validation passes, the data
is stored in the database and a table with all reservations returned,
again via AJAX.

So, I reiterate may request. Can someone direct me to prototype that
shows me how I can change the Day drop down box to the correct number
of days when the month is selected.

What's the problem? Since you already mess around with "Ajax", the
drop-down stuff is a cinch. (Or are you using one of those fancy
cross-browser libraries, which make mastering browser scripting a matter
of minutes?)

Whenever your month or year changes your attached change listener(s)
retrieve month and year (in case the month changed to February) from the
according dropdowns; unless you got February you look up your number of
days of the according month (e.g. a simple array with 12 entries); for
February you use your well-known formula to calculate your number of
days. Remove all superfluous options from your day-drop down box (a
maximum of three) or append missing ones.

Gregor

 

[rf]

Am 2010-05-04 03:11, bruce meinte:


What's the problem? Since you already mess around with "Ajax", the
drop-down stuff is a cinch. (Or are you using one of those fancy
cross-browser libraries, which make mastering browser scripting a matter
of minutes?)

Whenever your month or year changes your attached change listener(s)
retrieve month and year (in case the month changed to February) from the
according dropdowns; unless you got February you look up your number of
days of the according month (e.g. a simple array with 12 entries); for
February you use your well-known formula to calculate your number of days.
Remove all superfluous options from your day-drop down box (a maximum of
three) or append missing ones.

Or you use one of the thousands of pop-uppy calendar things out there that
allow one to choose a date with a couple of mouse clicks. No fiddling with
damn nasty thirty line long select elements.

 

[bruce]

bruce wrote:

[...]

Okay, you have made this into a fantastic discussion, BUT, the
solution as I request, is what I want. My code is for a scheduling
system for the Tennis courts and the Cabana of my Homeowner's
Association consisting of 200 families.

My input page has 9 drop down boxes and a submit button. The date drop
down boxes (Month, Day, Year) are preloaded with "Today's" date. The
remaining drop down boxes are Start time and End time boxes are (Hour,
Minutes, AM/PM). Start time is set to the current time. Minutes are
(0, 15,30, 45) only. End time is set to 2 hours after the start time.
These are loaded on the server using PHP.

My validation is done on the Server using AJAX. If validation fails,
an error message, via AJAX is returned. If validation passes, the data
is stored in the database and a table with all reservations returned,
again via AJAX.

So, I reiterate may request. Can someone direct me to prototype that
shows me how I can change the Day drop down box to the correct number
of days when the month is selected.

I don't know of any such prototype. but you should ask yourself if you
should be fooling around with Ajax before you've learned how to do basic
DOM manipulation (e.g. populating a SELECT control).  I know that must
sound harsh, but it is what you need to hear at this point.

I highly recommend you write the initial version without script.  Then,
if it is really necessary, add some scripted enhancements as your
present skills allow.

You are correct with respect to my weakness on DOM manipulation,
however my application is completed and running. The changing of the
Day drop down box to reflect the correct number of days when the month
changes is an enhancement I want to add.

Bruce

 

[bruce]

[snip massive overquote]

[snip signature]

Okay, you have made this into a fantastic discussion, BUT, the
solution as I request, is what I want. My code is for a scheduling
system for the Tennis courts and the Cabana of my Homeowner's
Association consisting of 200 families.

Not a help desk.

Sorry, I don't understand what you mean by "Not a help desk." I have
always assumed that these newsgroups were just that, a help desk for
where highly skilled programmers can assist lesser skilled
programmers. Or did you mean something else?

Nine select boxes. That's wonderful.

Yes, I think it's a great way to go.

Using these Nine select boxes, it's very easy for the customer to
select his/her date, start time and end time, then clicking submit. No
fumbling with the keyboard where typing mistakes can be made. I don't
have to validate the date format. Did he enter 5/4/10, 5/4/2010, 4 May
2010, May 4, 2010, et. al.

And when that fails?

When the validation fails, I return an error message, via AJAX.

Based on the question you are asking, you should not be attempting any
Ajax.

AJAX makes validation much easier. On the client side, I can check
for input mistakes, like the End date is before the start date. On the
server side, I have to check is someone else has already reserved this
time.

The technical solution to what you are asking is not all that hard.

Okay. Can you point to me where there is an example of what I want..

 

[Jeremy J Starcher]

Sorry, I don't understand what you mean by "Not a help desk." I have
always assumed that these newsgroups were just that, a help desk for
where highly skilled programmers can assist lesser skilled programmers.
Or did you mean something else?

You see, a helpdesk is [usually] a paid position that has an certain
obligations. Except for a rare few who have volunteered for special
obligations, nobody here needs do anything.

Your phrase:

Okay, you have made this into a fantastic discussion, BUT, the
solution as I request, is what I want.

Strongly suggests that you have come in expecting answers. And if you
paid a help desk, that might be a reasonable thing to expect. However,
you have come into a usenet discussion group, and a discussion is what
you got. Sometimes the answers you want come out of that discussion,
sometimes they don't.

 

[Dr J R Stockton]

In comp.lang.javascript message <da7d371e-e20d-408c-83a5-f8393c024c8e@a2
1g2000yqn.googlegroups.com>, Sun, 2 May 2010 19:45:58, bruce

I have 3 dropdown boxes, Month, Day, Year. When I change the month, I
want the contents of the Day dropdown box be adjusted to the correct
days in the new month. I would expect to be able to use an onChange
event on the Month dropdown box. I don't know how to reset and reload
the Day dropdown box.

Can someone refer me to some sample code that does this?

Yes, near enough. However, since the length of the month depends on the
numbers of the month and year, and also forms should be filled in left
to right, top to bottom (if using a Western-type language), you need
HTML for Year, Month, Day. What you want should be disregarded.

See in Web <URL:http://www.merlyn.demon.co.uk/js-date6.htm>.

 

[Gregor Kofler]

Am 2010-05-04 11:15, rf meinte:

Or you use one of the thousands of pop-uppy calendar things out there that
allow one to choose a date with a couple of mouse clicks. No fiddling with
damn nasty thirty line long select elements.

Indeed. But he was very specific (for no apparent reason) about those
drop downs.

Gregor

 

[bruce]

[snip massive overquote]

[snip signature]

Okay, you have made this into a fantastic discussion, BUT, the
solution as I request, is what I want. My code is for a scheduling
system for the Tennis courts and the Cabana of my Homeowner's
Association consisting of 200 families.

Not a help desk.

Sorry, I don't understand what you mean by "Not a help desk." I have
always assumed that these newsgroups were just that, a help desk for
where highly skilled programmers can assist lesser skilled
programmers. Or did you mean something else?

Nine select boxes. That's wonderful.

Yes, I think it's a great way to go.

Using these Nine select boxes, it's very easy for the customer to
select his/her date, start time and end time, then clicking submit. No
fumbling with the keyboard where typing mistakes can be made. I don't
have to validate the date format. Did he enter 5/4/10, 5/4/2010, 4 May
2010, May 4, 2010, et. al.

And when that fails?

When the validation fails, I return an error message, via AJAX.

Based on the question you are asking, you should not be attempting any
Ajax.

AJAX makes validation much easier.  On the client side, I can check
for input mistakes, like the End date is before the start date. On the
server side, I have to check is someone else has already reserved this
time.

The technical solution to what you are asking is not all that hard.

Okay. Can you point to me where there is an example of what I want..

You are correct. The technical solution is simple. I have it working
with basically 4 lines of code.

Thanks everyone for the suggestions and help...

Bruce

 

[Jukka K. Korpela]

bruce wrote:

[ massive fullquote despite all the clues posted... ]

You are correct. The technical solution is simple. I have it working
with basically 4 lines of code.

For some odd values of "working", I gather from the URL. (That is, its
absence.)

I bet your code does not even address one of the technical issues I
mentioned: the number of days in February depends on the year, and your
scenario (to the small amount it was revealed) postulates that the year is
selected _after_ selecting month and day.

But I do accept the idea that you can make almost everything work in 4 lines
of code in JavaScript. You might just need extraordinarily long lines at
times.

 

[bruce]

[snip massive overquote]

[snip signature]

Okay, you have made this into a fantastic discussion, BUT, the
solution as I request, is what I want. My code is for a scheduling
system for the Tennis courts and the Cabana of my Homeowner's
Association consisting of 200 families.

Not a help desk.

Sorry, I don't understand what you mean by "Not a help desk." I have
always assumed that these newsgroups were just that, a help desk for
where highly skilled programmers can assist lesser skilled
programmers. Or did you mean something else?

Nine select boxes. That's wonderful.

Yes, I think it's a great way to go.

Using these Nine select boxes, it's very easy for the customer to
select his/her date, start time and end time, then clicking submit. No
fumbling with the keyboard where typing mistakes can be made. I don't
have to validate the date format. Did he enter 5/4/10, 5/4/2010, 4 May
2010, May 4, 2010, et. al.

And when that fails?

When the validation fails, I return an error message, via AJAX.

Based on the question you are asking, you should not be attempting any
Ajax.

AJAX makes validation much easier.  On the client side, I can check
for input mistakes, like the End date is before the start date. On the
server side, I have to check is someone else has already reserved this
time.

The technical solution to what you are asking is not all that hard.

Okay. Can you point to me where there is an example of what I want..

I thought I posted this message but I can't find it. So please excuse
my double post if it happens to be out there..

Garrett:

You are correct. The solution to my problem was easy. 4 lines of
code..

Thanks everyone for the help.

Bruce

 

[bruce]

bruce wrote:

[ massive fullquote despite all the clues posted... ]

You are correct. The technical solution is simple. I have it working
with basically 4 lines of code.

For some odd values of "working", I gather from the URL. (That is, its
absence.)

I bet your code does not even address one of the technical issues I
mentioned: the number of days in February depends on the year, and your
scenario (to the small amount it was revealed) postulates that the year is
selected _after_ selecting month and day.

But I do accept the idea that you can make almost everything work in 4 lines
of code in JavaScript. You might just need extraordinarily long lines at
times.

I'm sorry I didn't mention the routine to determine how many days in
the month. I also have that routine and it does account for 28/29 days
in February even the case where the 400 year century is not a leap,
not that I really care about in my case... Your are correct on
February if the client selects the NEXT year ddand it happens to be a
leap year. February 29th will not appear in the drop down list.

Also, I did find my earlier post. Sorry folks for the double post.. I
doubt it will happen again.

Bruce

 

[Garrett Smith]

bruce wrote:

[ massive fullquote despite all the clues posted... ]

You are correct. The technical solution is simple. I have it working
with basically 4 lines of code.

For some odd values of "working", I gather from the URL. (That is, its
absence.)

I bet your code does not even address one of the technical issues I
mentioned: the number of days in February depends on the year, and your
scenario (to the small amount it was revealed) postulates that the year
is selected _after_ selecting month and day.

But I do accept the idea that you can make almost everything work in 4
lines of code in JavaScript. You might just need extraordinarily long
lines at times.