Re^2: Dynamic Drop down in CGI

Replies are listed 'Best First'.
Re^3: Dynamic Drop down in CGI by almut (Canon) on Jun 09, 2009 at 16:28 UTC
Here's an example to get you started: <html> <head> <script type="text/javascript"> function setmenu2() { var menu1 = document.getElementById('menu1'); var sel = menu1.options[menu1.selectedIndex].text; var menu2 = document.getElementById('menu2'); if (sel == "Foo") { menu2.innerHTML = "<option>Foo-1</option>" +"<option>Foo-2</option>"; } else { menu2.innerHTML = "<option>Bar-1</option>" +"<option>Bar-2</option>" +"<option>Bar-3</option>"; } } </script> </head> <body> <select id="menu1" onchange="setmenu2()"> <option>please select...</option> <option>Foo</option> <option>Bar</option> </select> <select id="menu2"> <option>- ?? -</option> </select> </body> </html> [download]	[reply] [d/l]
Re^4: Dynamic Drop down in CGI by afoken (Chancellor) on Jun 09, 2009 at 20:04 UTC
Please don't use the propritary innerHTML attribute, use DOM methods (createElement() and friends) to manipulate the DOM. And for this special problem, use the form[].elements[].opions[] object to add new entries. (Example and documentation) Alexander -- Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so". ;-)	[reply]
Re^5: Dynamic Drop down in CGI by almut (Canon) on Jun 09, 2009 at 22:33 UTC
Please don't use the propritary innerHTML attribute... Why? Because it's not a standard, yet? Frankly, I don't consider this much of a problem. `innerHTML` works with all major browsers, and is (almost certainly) going to be part of the upcoming HTML 5 standard (also see HTML 5 differences from HTML 4, section 4.1 and 4.2). Also, it's in most cases easier to use and understand (and typically faster, too) than the respective combination of 'true' DOM methods. I figured this might be of advantage for someone just getting started.	[reply] [d/l]
Re^4: Dynamic Drop down in CGI by d0353101 (Novice) on Jun 10, 2009 at 10:01 UTC
Hi Almut, Thanks for this code. But this is a simple HTML-JavaScript page in which values are Hard-coded. As I described, in my case all the values are populating in Dropdown through DB. It would be great help if you could add some DB Interaction in this. Regds Vivek	[reply]
Re^5: Dynamic Drop down in CGI by almut (Canon) on Jun 10, 2009 at 10:55 UTC
...page in which values are Hard-coded. Essentially, you have three options: Prepopulate all possible menus, in which case you'd replace those hard-coded values in the page with content filled in from the DB, using a templating system (wouldn't scale well if you have lots of or unpredictable content). Use classical CGI, i.e. submit the form upon an onChange event in menu1, and generate an entire new HTML page/frame every time with the appropriate menu2 contents. Use Ajax to dynamically fetch the menu2 contents depending on the menu1 selection, and update menu2 without regenerating the page (using the same DOM technique as shown). But as you already said you're "not using Ajax", your available options reduce by one...	[reply]
Re^5: Dynamic Drop down in CGI by Corion (Patriarch) on Jun 10, 2009 at 10:11 UTC
This site is not a code writing service. Also, this site is chiefly about Perl, not Javascript or HTML. So please don't ask for neither completed code nor Javascript code.	[reply]
Re^6: Dynamic Drop down in CGI by d0353101 (Novice) on Jun 11, 2009 at 05:27 UTC
Re^7: Dynamic Drop down in CGI by Your Mother (Archbishop) on Jun 11, 2009 at 06:18 UTC
Re^3: Dynamic Drop down in CGI by Anonymous Monk on Jun 09, 2009 at 15:17 UTC
A small example will really help me out. You know how to whistle, don't you, Steve? You just put your lips together and GOOGLE. 'Perl' ne 'Java'	[reply]