Helpful Information

Category: Dynamic Drive scripts help

Using two Image Combo Link Boxes simultaneously

I'm trying to use two Image Combo Link Boxes simultaneously on the same page and cannot get them both to work at the same time. I have read the tutorials on the sites on how to do this, and I have spent hours trying everything, but apparently my JavaScript knowledge is not sufficient to get it to work (or maybe it's not possible).

The script is here:

http://www.javascriptkit.com/script/cut184.shtml

Any help would be greatly appreciated.

Thanks,
Cornelius

Hi Cornelius,
What you need to do is give different names to each select tag for the combo boxes and then pass the selection to the function. The function then needs to be modified to handle multiple combo boxes. Here is some sample code that has two combo boxes and use the same function.

<html>
<head>
<title>Two Combo Boxes</title>
<script language="javascript">

</script>
</head>
<body>
<form name="mycombo">
<select name="example1" size="1">
<option value="http://www.cnet.com">Cnet</option>
<option value="http://www.cnn.com">CNN</option>
<option value="http://www.geocities.com">Geocities</option>
</select>
<a href="JavaScript:go(document.mycombo.example1.options[document.mycombo.example1.selectedIndex].value)"><img src="207.gif" border=0></a>
<br><br><br><br>
<select name="example2" size="1">
<option value="http://www.cnet.com">Cnet</option>
<option value="http://www.cnn.com">CNN</option>
<option value="http://www.geocities.com">Geocities</option>
</select>
<a href="JavaScript:go(document.mycombo.example2.options[document.mycombo.example2.selectedIndex].value)"><img src="207.gif" border=0></a>
</form>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</body>
</html>

I placed the go function in the head section of the document rather than in the body section.

Ok, I see that. Although I'm using the same form type, the drop-down boxes are populated by completely different data with links to a different page. So, the location= is different for each one, right? What would the link ID be in the header? And would it still be all one form?

I hope this is clear.

Thanks again,
Cornelius

I think it's best that I attach the file. I think my problem is the "linkid" in the head of the document. What is supposed to be there? I'm stumped!

In use, it's a ".asp" file, although to upload it I had to make it a ".txt" file.

Thanks,
Cornelius

In my example you don't change the function at all and it can be used for more than one combo. The key is this code here:

<a href="java script:go(document.mycombo.example2.options[document.mycombo.example2.selectedIndex].value)">

For each select that you have you need to specify the select tag name. If you added a third combo box and the name in the select tag was example3 then the line above would be this:
<a href="java script:go(document.mycombo.example3.options[document.mycombo.example3.selectedIndex].value)">

When a selection is made and the go image is clicked this will send the value from the option selected to the go function.

requestcode,

Thanks soooo much! I got it working. The final problem I was having was my stupidity (or just working on this for too long). I had the script in a FrontPage "include page" which gets pulled into another page (I think it's like Dreamweaver libraries). Well, I foergot that only the body of the page gets pulled in, not the head!! So, I just had to go to the handful of pages individually and paste the Javascript funtion in the head, and voila! It worked.

Your help was very much appreciated.

Thank you,
Cornelius