How can I run multiple Double Combobox scripts on the same page?

[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. Either way, it is important that the options in the second box contain the URL so that the form will take the user to the relevant page they have selected.

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]

I currently have the code for each publication saved in individual documents for ease of working, and 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.

... 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!

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="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>

[ddadmin]

I assume you're talking about this script: http://javascriptkit.com/script/cut183.shtml

The quick and dirty way to get a 2nd instance of the script running is just to duplicate the first instance, but change all variable/ function name instances in the 2nd instance to something unique. Here's the result:


<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>











<h3>2nd example</h3>




<form name="altexample">

Choose Category:
<select name="altcat1" id="altcat1" size="1" onChange="altredirect(this.options.selectedIndex,'altsubcat1')">
<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="altsubcat1" id="altsubcat1" size="1" onchange="altgo()">
<option value="">Select above first</option>
</select>
</p>
<script>
<!--

var altgroups=document.altexample.altcat1.options.length
var altgroup=new Array(altgroups)
for (i=0; i<altgroups; i++)
altgroup[i]=new Array()

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

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

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

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

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

function altgo(){
location=alttemp.options[alttemp.selectedIndex].value
}


//-->
</script>
</form>

[RachVG]

That's not where I found the script (I can't remember, I have it written down at the office but I'm not there right now, but the original version I used didn't have the 'go' button) but it looks like the same code, more or less, yeah.

Thank you for the help - I had assumed all along that would be the way to make it work, but there must have been something somewhere that I hadn't changed because it just refused to work full stop. So thanks for that!

Edit: Something still isn't right. I've copied my values etc into your code and it's populating the example one box with example two's links.

[RachVG]

Having fiddled around with it a little more to try and find the problem, I've discovered that if I run your version of the code with no changes, it populates both "subcategory" boxes with the same information. For example, if I change the code to read as follows:


<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>











<h3>2nd example</h3>




<form name="altexample">

Choose Category:
<select name="altcat1" id="altcat1" size="1" onChange="altredirect(this.options.selectedIndex,'altsubcat1')">
<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="altsubcat1" id="altsubcat1" size="1" onchange="altgo()">
<option value="">Select above first</option>
</select>
</p>
<script>
<!--

var altgroups=document.altexample.altcat1.options.length
var altgroup=new Array(altgroups)
for (i=0; i<altgroups; i++)
altgroup[i]=new Array()

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

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

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

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

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

function altgo(){
location=alttemp.options[alttemp.selectedIndex].value
}


//-->
</script>
</form>

With the second example linking to example.net instead of example.com as the first one does, both boxes lead me to example.com, no matter what. When I tried it with my content, they both led to the ad booking pages for the second publication rather than the one to each.