How do I modify a dropdown box?
in [JavaScript]
|
Prev: FAQ Topic - How do I get a jsp/php variable into client-side javascript? (2010-05-03)
Next: The famous 'resend'
From: bruce on 2 May 2010 22:45 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
From: Garrett Smith on 3 May 2010 01:08 bruce wrote: > I have 3 dropdown boxes, Month, Day, Year. Hello fellow American. How do I know that? Oh, well, we have that problem you described... As well as pounds, miles, gallons, et al. 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? > I could, but I won't. The approach you seek a solution for has a few significant problems: 1) prevents the user from entering data when the browser is unable to execute the script script. 2) "mm/dd/yy" and is ambiguous and leads to wrong data being entered. particularly when used by non-Americans. 3) Cumbersome for the user; user must tab to each field and enter the data by using arrow keys. As mentioned, the browser may not be able to execute the script. When javascript is disabled or the script has an error, the user is stuck being unable to enter data. Instead, I'll recommend something that does not need any javascript, but can be enhanced by javascript. Text input, with ISO-8601 date format works with no javascript and can be unambigously understood, world-wide. 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): [_______________] Placeholder text, if used, should not be set in the element's `value` attribute because doing that requires js-disabled users (like me) to select the text in the input field. You may want also to use input type="date" with an HTML doctype in the document. Browsers that do not support that attribute value will default to text input. If you want to get fancy with that, a javascript calendar widget for can provide the effect seen in Opera for browsers that have javascript enabled but do not support input type="date". This, however, takes a lot more work to get right. You'll be fine with ISO-8601, see the FAQ for more information and links to resources. -- Garrett comp.lang.javascript FAQ: http://jibbering.com/faq/
From: John G Harris on 3 May 2010 05:39 On Sun, 2 May 2010 at 22:08:03, in comp.lang.javascript, Garrett Smith wrote: <snip> >First name: [_______________] >Last name: [_______________] >Birth date {YYYY-MM-DD): [_______________] <snip> But accept 2010-05-03 2010-5-3 2010/5/3 2010.5.3 as equally valid. (Unless you actively want to lose customers). John -- John Harris
From: Thomas 'PointedEars' Lahn on 3 May 2010 08:47 Garrett Smith wrote: > bruce wrote: >> I have 3 dropdown boxes, Month, Day, Year. > > Hello fellow American. How do I know that? Oh, well, we have that > problem you described... As well as pounds, miles, gallons, et al. > > 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? > > I could, but I won't. > > The approach you seek a solution for has a few significant problems: > > 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. > 2) "mm/dd/yy" and is ambiguous and leads to wrong data being entered. > particularly when used by non-Americans. You are jumping to conclusions. They may as well be using mmm/dd/yyyy, in which case it would not be ambiguous. > 3) Cumbersome for the user; user must tab to each field and enter the > data by using arrow keys. But tabbed navigation is accessible by contrast, and in some browsers you can type the number to highlight the item without using the arrow keys. I very much prefer that over entering delimiters. > As mentioned, the browser may not be able to execute the script. When > javascript is disabled or the script has an error, the user is stuck > being unable to enter data. False dilemma. > Instead, I'll recommend something that does not need any javascript, but > can be enhanced by javascript. This can. > Text input, with ISO-8601 date format works with no javascript Other date formats, too. > 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. > Placeholder text, if used, should not be set in the element's `value` > attribute because doing that requires js-disabled users (like me) to > select the text in the input field. ACK > 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. > Browsers that do not support that attribute value will default to text > input. You cannot know that. There is no provision in the Specification for a fallback to the default value if an invalid value is specified, so any observed fallback behavior is proprietary. PointedEars -- Use any version of Microsoft Frontpage to create your site. (This won't prevent people from viewing your source, but no one will want to steal it.) -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
From: Thomas 'PointedEars' Lahn on 3 May 2010 08:51
John G Harris wrote: > Garrett Smith wrote: >> First name: [_______________] >> Last name: [_______________] >> Birth date {YYYY-MM-DD): [_______________] > <snip> > > But accept > 2010-05-03 > 2010-5-3 > 2010/5/3 > 2010.5.3 > as equally valid. (Unless you actively want to lose customers). That's why this approach is FUBAR. "2010/5/3" can mean "2010-05-03" or "2010-03-05", depending on the user. Give them two-digit day number, month name in their preferred language, and four-digit year number, and everyone will be satisfied. PointedEars -- Danny Goodman's books are out of date and teach practices that are positively harmful for cross-browser scripting. -- Richard Cornford, cljs, <cife6q$253$1$8300dec7(a)news.demon.co.uk> (2004) |