Chained Selects & goto

Nothing happens on "go"

[EmmuingerDesign]

Good morning Webmaster World. To begin, I will confess my relative inexperience in java, or programming languages in general. I am however a fairly intuitive individual.

The problem: I've built my chained selects and I am satisfied with the navigation and content, however, when selecting the "Go" button, I no longer get a result (alert or otherwise). The chained selections I'm using are based on the ones posted at DynamicDrive and as far as I can tell, my format has not veered from the sample they provide.

The page in question is [url]www.emmingerdesign.com/product-selection.html[/url][url][/url]

I'll post the first section of the config.js file:

var hide_empty_list=true; //uncomment this line to hide empty selection lists
var disable_empty_list=true; //uncomment this line to disable empty selection lists

var onclickaction="alert" //set to "alert" or "goto". Former is for debugging purposes, to tell you the value of the final selected list that will be used as the destination URL. Set to "goto" when below configuration is all set up as desired. 

var newwindow=1 //Open links in new window or not? 1=yes, 0=no.

/////DEFINE YOUR MENU LISTS and ITEMS below/////////////////

addListGroup("chainedmenu", "First-Select");

addOption("First-Select", "Printer Manufacturer", "", 1); //HEADER OPTION
addList("First-Select", "Amano", "", "Amano");
addList("First-Select", "Brother", "", "Brother");
addList("First-Select", "Cale", "", "Cale");
addList("First-Select", "Casio", "", "Casio");
addList("First-Select", "Digital", "", "Digital");
addList("First-Select", "Federal APD", "", "Federal APD");
addList("First-Select", "Intermec", "", "Intermec");
addList("First-Select", "Mackay", "", "Mackay");
addList("First-Select", "Metric", "", "Metric");
addList("First-Select", "Lexis", "", "Lexis");
addList("First-Select", "O'neil", "", "Oneil");
addList("First-Select", "Parkeon", "", "Parkeon");
addList("First-Select", "Ventek", "", "Ventek");
addList("First-Select", "Zebra", "", "Zebra"); //END OF SELECTION 1


addOption("Amano", "Select an item", "", 1); //HEADER OPTION
addList("Amano", "AGP 2000", "", "Amano-AGP2000");
addList("Amano", "AGP 4300", "", "Amano-AGP4300");
addList("Amano", "AGP 5200", "", "Amano-AGP5200");
addList("Amano", "AGP 6000", "", "Amano-AGP6000");
addList("Amano", "AGP 6800", "", "Amano-AGP6800");
addList("Amano", "AGP 7800", "", "Amano-AGP7800");
addList("Amano", "ETP 12/22", "", "Amano-ETP1222"); //END OF THIS NODE

addOption("Amano-AGP2000", "Partnumber 1", "http://www.google.com");
addOption("Amano-AGP4300", "Partnumber 1", "http://www.google.com");
addOption("Amano-AGP5200", "Partnumber 1", "http://www.google.com");
addOption("Amano-AGP6000", "Partnumber 1", "http://www.google.com");
addOption("Amano-AGP6800", "Partnumber 1", "http://www.google.com");
addOption("Amano-AGP7800", "Partnumber 2", "http://www.google.com");
addOption("Amano-ETP1222", "Partnumber 3", "http://www.google.com"); //END OF THIS NODE

If there is no issue here, or in the source code on the site, is it possible that the chainedselect.js file requires changes? In closing I would like to state that I know people bringing their problems here has got to be irritating, though I do greatly appreciate the help and will remain a member and do my part to contribute. Thank you.

[Fotiman]

Welcome to WebmasterWorld!

It looks like your "Go" button button has on onclick handler:

<input type="button" value="Go" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)">

But I couldn't find the function goListGroup in your code.

[Fotiman]

As a side note, your page will be inaccessible to those with JavaScript disabled, which is generally not a good idea. It's better to treat JavaScript as an enhancement and still allow the site to be accessible even when JavaScript is disabled. It requires a bit more planning up front.

[EmmuingerDesign]

Thank you very much Fotiman, as it turns out the function you mentioned was located in the separate .js file and for whatever reason, I must have deleted it because when I opened the original file it was there.

Also, I will take your secondary suggestion under advisement as well and do some research on how to best take care of handling the javascript.

Am I correct in assuming that anything currently in javascript would need to be rewritten for this change?

[Fotiman]

Am I correct in assuming that anything currently in javascript would need to be rewritten for this change?

Quite possibly. For example, if your content (the lists containing all possible values) is only created via JavaScript, then yes, that portion would need to be rewritten.

Chained Select boxes can be a bit tricky. One approach might be to do something like create the content for each list in your HTML, and then hide/unhide the appropriate list(s) using JavaScript. The tricky part, though, is how to handle it when JavaScript is disabled. In a case like that, you'll need to send a request to the server for each consecutive list. For example:

page1.html contains the first list and a Go button which submits the selected value to the server to determine the 2nd list. This would use a server side language (PHP, ASP, etc.) to populate the values of the 2nd list, or alternatively redirect to an appropriate static page containing lists 1 and 2. For example, if the user picked "Amano" from the list, then whatever processes the form might send them to page-amano.html (which contains list 1 with amano selected, and the values for amano in list 2).

It's a lot of work to do it right in a way that's truly accessible. It gets easier if you have a server side language to dynamically populate the lists. Also, once it's in place, you *could* use AJAX to pull in only the appropriate next level list (for example, user selects "Amano" and then an AJAX request fetches page-amano.html, parses out the 2nd list, and copies it into the current page.

Good luck. :)