Mulitple Double Combobox scripts on same page

Newbie js problem!

[RachVG]

Hi,
I've got a perfectly working double combobox script, however now I'm wanting to put another two on the same page to offer the same options for three different publications.

Basically, its for a newspaper's adsonline service where customers can place birthday announcements etc via the website. The first combo box has birthday, births, weddings, engagements, anniversaries etc, and the second box has specific category information based on the first choice - 1st, 18th, 21st etc for birthdays, golden, ruby, diamond etc for anniversaries. When the second is selected, the onchange takes the user to the booking page for their selected option.

We run this service for two newspapers, and also the option to place the advert in both publications - therefore, it needs to be repeated three times, but where the links in publication #1 take the user to example.com, in publication #2 they'd go to example.net and in publication #3 they'd go to example.org.

I've searched high and low found helpful posts showing me how to get two working double combo boxes on the same page, but they don't use a link with the second box. If I had to put a "go" button on, I would, but I'd rather stick with using onchange if possible.

Currently it displays as
Publication #1: [Category1] [Subcategory1]

I need to modify it so that I can triplicate it on the same page, so that it will show as:
Publication #1: [Category1] [Subcategory1]
Publication #2: [Category2] [Subcategory2]
Publication #3: [Category3] [Subcategory3]

This is a shortened version of the script I have at the moment (the full thing has 14 options in box one, and 34 in the largest subcatgeory in box two. Apologies if this is too much unncessary info, I have a tendancy to overexplain instead of running the risk of missing out details.

<form name="pressnotices">

Choose Category:
<select name="presscat" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected="selected">Please Select</option>
<option>Acknowledgements </option>
<option>Birthdays </option>
<option>Births & Adoptions </option>
</select>
</p>
<p align="left">Choose Subcategory:
<select name="presssubcat" size="1" onchange="go()">
<option value="">Select above first</option>
</select>
</p>
<script>
<!--

var groups=document.pressnotices.presscat.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Select above first","")

group[1][0]=new Option("--Acknowledgements --","")
group[1][1]=new Option("Acknowledgement","http://www.example.com")

group[2][0]=new Option("--Birthdays --","")
group[2][1]=new Option("1st Birthday","http://www.example.com")
group[2][2]=new Option("18th Birthday","http://www.example.com")
group[2][3]=new Option("21st Birthday","http://www.example.com")

group[3][0]=new Option("--Births --","")
group[3][1]=new Option("Births","http://www.example.com")
group[3][2]=new Option("Adoptions","http://www.example.com")

var temp=document.pressnotices.presssubcat

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
</form>

[httpwebwitch]

first, give each of the fields a distinct name and id
[name=presscat1][name=presssubcat1]
[name=presscat2][name=presssubcat2]
[name=presscat3][name=presssubcat3]

get rid of this line, which defines temp in the global scope - you won't need it:

var temp=document.pressnotices.presssubcat 

Then, in your "presscat" select, you should specify which of the "presssubcat" it's targeting. that means a small change to the onChange event listeners:

<select ... onChange="redirect(this.options.selectedIndex,'presssubcat[b]1[/b]')"> 
<select ... onChange="redirect(this.options.selectedIndex,'presssubcat[b]2[/b]')"> 
<select ... onChange="redirect(this.options.selectedIndex,'presssubcat[b]3[/b]')"> 

thus your redirect function takes two parameters, not one. The first is the selectedIndex, the second is the name of the targeted element.

the function definition needs the extra parameter added:

function redirect(x,elem){ 

Then put this inside the redirect function

temp = document.pressnotices[elem];

then proceed normally, using the group[] array to populate the Options of temp.

I didn't try my own advice or test any of this, but if I were debugging this thing, that's the approach I'd take.

[RachVG]

Thank you for your easy to understand help!

I currently have the code for each publication saved in individual documents for ease of working, and have tweaked all of them as per your instructions. Individually, they work great.

My main question now is how to put them together on one document so that they will work well together. The code as it stands is obviously the form part followed by the script part, and I know that just pasting the other two publications after this first one won't work as form-script-form-script-form-script is a big no-no if I want it to work correctly.

I've altered the cat/subcat names to just cat1 and subcat1 instead of including the name of the publication, which was the intention when I started. This is the code I have now, including the changes you offered ... as a complete js newbie I just need a quick bump in the right direction in terms of where to paste which parts of the code for publications 2 and 3!

Thanks again,
Rachael

<form name="pressnotices">

Choose Category:
<select name="cat1" id="cat1" size="1" onChange="redirect(this.options.selectedIndex,'subcat1')">
<option selected="selected">Please Select</option>
<option>Acknowledgements </option>
<option>Birthdays </option>
<option>Births & Adoptions </option>
</select>
</p>
<p align="left">Choose Subcategory:
<select name="subcat1" id="subcat1" size="1" onchange="go()">
<option value="">Select above first</option>
</select>
</p>
<script>
<!--

var groups=document.pressnotices.cat1.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Select above first","")

group[1][0]=new Option("--Acknowledgements --","")
group[1][1]=new Option("Acknowledgement","http://www.example.com")

group[2][0]=new Option("--Birthdays --","")
group[2][1]=new Option("1st Birthday","http://www.example.com")
group[2][2]=new Option("18th Birthday","http://www.example.com")
group[2][3]=new Option("21st Birthday","http://www.example.com")

group[3][0]=new Option("--Births --","")
group[3][1]=new Option("Births","http://www.example.com")
group[3][2]=new Option("Adoptions","http://www.example.com")

function redirect(x,elem){
temp = document.pressnotices[elem];
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
</form>