multiple dropdowns w/ image button

Printable View

09-18-2006, 11:44 PM
thewebmacster

multiple dropdowns w/ image button

1) Script Title: Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...bodescribe.htm

3) Describe problem: No, problem as is. I need to modify where you use an image button instead and have two drop downs. I feel that I need a professors expert advise. An example of what I'm trying to accomplish: The first drop down consists of a list of for example sizes: Small, Medium & Large and the second drop down consist of Colors: Red, Blue, & Yellow. So, when you go to the page the default selected is Small in the first drop down and Red in the second drop down so that when you just click on the image button it goes to a defined URL for example: smallred.html or if you did select the drop down and choose Large, and then you select Blue in the second drop down and click the button it would take you to: largeblue.com for example.

Is this possible? :confused:
09-19-2006, 05:09 AM
jscheuer1

This is easy enough to do but, it implies that you are selling something. Since this and all javascripts are dependant upon the client having javascript enabled, you would want a non-javascript fall back. There are many ways to do that. I just wanted to advise you of the probable need.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body>  <form name="form1"> <select name="select1" size="1" style="background-color:#FFFFD7" onchange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')"> <option selected>Small</option> <option>Medium</option> <option>Large</option> <option>Extra Large</option> <option>XX Large</option> </select><br> <span id="textcontainer1" align="left" style="font:italic 13px Arial"> </span> </form>  <form name="form2"> <select name="select2" size="1" style="background-color:#E3FFDF" onchange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')"> <option selected>Red</option> <option>Blue</option> <option>Yellow</option> <option>Green</option> </select><br> <span id="textcontainer2" align="left" style="font:italic 13px Arial"> </span><br> <br> <input name="thebut" type="button" onclick="jumptolink(document.form1.select1, document.form2.select2)"> </form>   <script type="text/javascript"> /*********************************************** * Drop down menu w/ description- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE var thetext1=new Array() thetext1[0]="Get your item in size Small" thetext1[1]="Get your item in size Medium" thetext1[2]="Get your item in size Large" thetext1[3]="Get your item in size Extra Large" thetext1[4]="Get your item in size XX large" /// You may define additional text arrays if you have multiple drop downs: var thetext2=new Array() thetext2[0]="Get your item the color Red" thetext2[1]="Get your item the color Blue" thetext2[2]="Get your item the color Yellow" thetext2[3]="Get your item the color Green" //2) Set target - _new or _self: var target="_self" // Now, see 3) below for final customization step function displaydesc(which, descriptionarray, container){ if (document.getElementById) document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex] var what=document.form1.select1, what2=document.form2.select2; document.form2.thebut.value=what.options[what.selectedIndex].text+' '+what2.options[what2.selectedIndex].text; document.form2.thebut.style.backgroundColor=what2.options[what2.selectedIndex].text.toLowerCase(); document.form2.thebut.style.color=what2.options[what2.selectedIndex].text.toLowerCase()=='yellow'? 'black' : 'white'; } function jumptolink(what, what2){ var selectedopt=what.options[what.selectedIndex].text+what2.options[what2.selectedIndex].text window.open(selectedopt.toLowerCase().replace(/ /g, '')+'.htm',target) } //3) Call function displaydesc() for each drop down menu you have on the page // This function displays the initial description for the selected menu item // displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag): // Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page) displaydesc(document.form1.select1, thetext1, 'textcontainer1') displaydesc(document.form2.select2, thetext2, 'textcontainer2') </script> </body> </html>
09-19-2006, 09:54 AM
jscheuer1

Lucky you, I got a bit carried away with this one. Here is a more flexible version that has its configuration documented. Both this version and the previous will open a page named smallred.htm, largeblue.htm, xxlargegreen.htm, etc. I've also provided example alternate content for non-javascript enabled browsers.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body>  <form name="form1" style="display:none;"> <select name="select1" size="1" style="background-color:#FFFFD7" onchange="displaydesc(this, document.form2.select2, thetext1, document.form2.thebut, 2)"> <option selected>Small</option> <option>Medium</option> <option>Large</option> <option>Extra Large</option> <option>XX Large</option> </select><br> <input name="textcon" readonly style="font:italic 13px arial, sans-serif;border:0;"> </form>  <form name="form2" style="display:none;"> <select name="select2" size="1" style="background-color:#E3FFDF" onchange="displaydesc(this, document.form1.select1, thetext2, document.form2.thebut, 1)"> <option selected>Red</option> <option>Blue</option> <option>Yellow</option> <option>Green</option> </select><br> <input name="textcon" readonly style="font:italic 13px arial, sans-serif;border:0;"> <br> <br> <input name="thebut" type="button" style="cursor:pointer;line-height:175%;height:30px;border:3px outset silver;" title="Click to View Selection" onclick="jumptolink(this)"> </form>   <script type="text/javascript"> /*********************************************** * Drop down menu w/ description- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code * Modified for linked selects by jscheuer1 in http://www.dynamicdrive.com/forums ***********************************************/ //1) CUSTOMIZE TEXT DESCRIPTIONS FOR SELECT OPTIONS ABOVE - 1st select: var thetext1=new Array() thetext1[0]="Get your item in size Small" thetext1[1]="Get your item in size Medium" thetext1[2]="Get your item in size Large" thetext1[3]="Get your item in size Extra Large" thetext1[4]="Get your item in size XX large" /// - 2nd select var thetext2=new Array() thetext2[0]="Get your item the color Red" thetext2[1]="Get your item the color Blue" thetext2[2]="Get your item the color Yellow" thetext2[3]="Get your item the color Green" /// You may define additional text array pairs if you have multiple linked drop downs: //2) Set target for all links from the selects - _new or _self: var target="_self" // Now, see 3 & 4) below for final customization steps function displaydesc(which, which2, descriptionarray, butt, c){ which.form.textcon.size=Math.ceil(descriptionarray[which.selectedIndex].length*1.33); which.form.textcon.value=descriptionarray[which.selectedIndex]; var sels=[which, which2]; butt.value=sels[(c>1? 0 : 1)].options[sels[(c>1? 0 : 1)].selectedIndex].text+' '+sels[c-1].options[sels[c-1].selectedIndex].text; butt.style.backgroundColor=sels[c-1].options[sels[c-1].selectedIndex].text.toLowerCase(); butt.style.color=sels[c-1].options[sels[c-1].selectedIndex].text.toLowerCase()=='yellow'? 'black' : 'white'; } function jumptolink(el){ window.open(el.value.toLowerCase().replace(/ /g, '')+'.htm',target); } //3) Call function displaydesc() for each drop down menu you have on the page // This function displays the initial description for the selected menu item // displaydesc(select name, linked select name, text array name, button name, number of the select that governs color): // IMPORTANT: The first select is 1 the linked select is 2 for the purpose of which select governs color // When the displaydesc() function is the onchange event of a select, that select is represented by the word: this displaydesc(document.form1.select1, document.form2.select2, thetext1, document.form2.thebut, 2) displaydesc(document.form2.select2, document.form1.select1, thetext2, document.form2.thebut, 1) //4) Set form names used in this script: var fnames="form1, form2" fnames=fnames.replace(/ /g, '').split(','); for (var i_tem = 0; i_tem < fnames.length; i_tem++) document[fnames[i_tem]].style.display=''; </script> <noscript>  <ul> <li>Small <ul> <li><a href="smallred.htm">Red</a></li> <li><a href="smallblue.htm">Blue</a></li> <li><a href="smallyellow.htm">Yellow</a></li> <li><a href="smallgreen.htm">Green</a></li> </ul> </li> <li>Medium</li> <ul> <li><a href="mediumred.htm">Red</a></li> <li><a href="mediumblue.htm">Blue</a></li> <li><a href="mediumyellow.htm">Yellow</a></li> <li><a href="mediumgreen.htm">Green</a></li> </ul> <li>Large</li> <ul> <li><a href="largered.htm">Red</a></li> <li><a href="largeblue.htm">Blue</a></li> <li><a href="largeyellow.htm">Yellow</a></li> <li><a href="largegreen.htm">Green</a></li> </ul> <li>Extra Large</li> <ul> <li><a href="extralargered.htm">Red</a></li> <li><a href="extralargeblue.htm">Blue</a></li> <li><a href="extralargeyellow.htm">Yellow</a></li> <li><a href="extralargegreen.htm">Green</a></li> </ul> <li>XX Large</li> <ul> <li><a href="xxlargered.htm">Red</a></li> <li><a href="xxlargeblue.htm">Blue</a></li> <li><a href="xxlargeyellow.htm">Yellow</a></li> <li><a href="xxlargegreen.htm">Green</a></li> </ul> </ul>  </noscript> </body> </html>
09-20-2006, 03:35 AM
thewebmacster

I must say, I've come across your posts on a number of occasions before and you still amaze me with your knowledge. Script poetry. This is my first time posting here and I got an error message when I posted it, so, I posted it again, before I realized the first one went through. I didn't see a way to delete it. Is there?

I was curious to find out the sats on the javascript enabled browsers.
I found that 6% according to http://www.thecounter.com/stats/2006/August/javas.php were not enabled. That's 7,892,657 users and I'm one of the 3% Mac Os users who tries not to leave anyone out.

I realize now that I may have not been clear about my request in the last sentence of my initial post:

Quote:

when you just click on the image button it goes to a defined URL for example: smallred.html or if you did select the drop down and choose Large, and then you select Blue in the second drop down and click the button it would take you to: largeblue.com for example.

It may have been more clear in accidental second post:

Quote:

if you clicked on the drop down menu to blue and the other drop down to medium it would direct you to bluemediumorwhatever.html_or.com when you click the image button.

I need to be able to customize the URLs so that it could go to any url I specify. Is it still possible?
09-20-2006, 03:49 AM
jscheuer1

You will have to choose which pages you want it to go to, or if you prefer a domain or whatever. Once you know that, it can go wherever you like. If some go to pages, others to domains, with some using the naming convention worked out and others using whatever is available on another domain, you would have to make up a list of where you want each thing to go to.

The current demo simply takes whatever is selected in the first drop down, strips all spaces and converts it to lower case. It then takes whatever is selected in the second drop down and does the same, concatenates those strings and appends '.htm' to them and goes there when you click the button.
09-20-2006, 04:13 AM
thewebmacster

Perfect! I'm having to switch over to another project now. I really appreciate you expertise. I've have to add an image button too. I've had problems with image buttons not working in the past and have had to come up with alternatives methods. Do you have any tips or suggestions when it comes to adding an image button that will work with all browsers?
09-20-2006, 06:00 AM
jscheuer1

I was hoping to discourage you from using an image button. I guess for the reasons you state but, that's not what I was really thinking. It was more that you can get the actual button to do a lot, and even go through changes to intuitively let the user know what they've selected, as well as being an input - this means it can be unambiguously referenced in any browser using the document.name convention as well as easily monitored by server side code. So why not be happy with it?

But, to answer your question, I really haven't extensively researched image buttons. I would think that the most cross browser would simply be to use an image tag as a link. The trouble with images of any kind is that some browsers don't support them and more importantly, if your image is lost or large, it will not render in a timely fashion and the user will see something pretty ugly. If the point of an image is to look at the picture, that's just a risk you take but, for navigation, text is best and if you need a button use a button. There is always:

HTML Code:

<input type="image" src="some.gif">

Is that the sort of thing that was giving you troubles?
09-22-2006, 03:21 PM
thewebmacster

I'm having difficulty figuring out how to I specify any url instead of the naming convention? For example say I wanted to have the selection Large & Blue go to dynamicdrive.com or anywhere else?

Quote:

you would have to make up a list of where you want each thing to go to.

How do I do that?
09-22-2006, 04:13 PM
mwinter

Quote:

Originally Posted by jscheuer1

I've also provided example alternate content for non-javascript enabled browsers.

The noscript element is an inflexible, and often inappropriate way, to provide alternative content. In general, the script should degrade. With the example, at least, the entire thing should be handled server-side. The form itself should be intuitive enough to not require any sort of dynamic description. The data submitted would allow the server to determine what to do, whether it be redirect the user somewhere else, add a product to a shopping cart, or what ever.

Quote:

Originally Posted by thewebmacster

I was curious to find out the sats on the javascript enabled browsers.

Web statistics are usually useless and self-serving. Unless you know precisely the source of the data, how that data was gathered, and how it was processed, it doesn't really tell you anything about the Web in general.

One simply needs to accept that various things do occur: people use old browsers, people browse without images, people override style sheets, people disable scripting or ActiveX, some people are colour blind, some might be completely blind. That is the nature of the Web, and it cannot be fought, only coped with.

Mike
09-22-2006, 06:17 PM
jscheuer1

Quote:

Originally Posted by thewebmacster

I'm having difficulty figuring out how to I specify any url instead of the naming convention? For example say I wanted to have the selection Large & Blue go to dynamicdrive.com or anywhere else?

How do I do that?

Here is where the url is opened:

Code:

function jumptolink(el){ window.open(el.value.toLowerCase().replace(/ /g, '')+'.htm',target); }

It should first be changed to this:

Code:

function jumptolink(el){ var urlbase=el.value.toLowerCase().replace(/ /g, ''); window.open(urlbase+'.htm',target); }

This will make it easy to check the urlbase and determine if it is ok to use it or not. If you have just one or two links that you want to go elsewhere, you can do this:

Code:

function jumptolink(el){ var urlbase=el.value.toLowerCase().replace(/ /g, ''); if (urlbase=='smallred') window.open('http://www.dynamicdrive.com/',target); else if (urlbase=='largeblue') window.open('http://www.google.com/',target); else window.open(urlbase+'.htm',target); }

If most or all of your links will use something other than the naming convention, you would probably want to make up an array and loop through it to determine the page to open:

Code:

var urls=[]; urls[0]=["smallred", "http://www.somedomain.com/"]; urls[1]=["smallblue", "http://www.somedomain.com/"]; urls[2]=["smallyellow", "http://www.somedomain.com/"]; urls[3]=["smallgreen", "http://www.somedomain.com/"]; urls[4]=["mediumred", "http://www.somedomain.com/"]; urls[5]=["mediumblue", "http://www.somedomain.com/"]; urls[6]=["mediumyellow", "http://www.somedomain.com/"]; urls[7]=["mediumgreen", "http://www.somedomain.com/"]; urls[8]=["largered", "http://www.somedomain.com/"]; urls[9]=["largeblue", "http://www.somedomain.com/"]; urls[10]=["largeyellow", "http://www.somedomain.com/"]; urls[11]=["largegreen", "http://www.somedomain.com/"]; urls[12]=["extralargered", "http://www.somedomain.com/"]; urls[13]=["extralargeblue", "http://www.somedomain.com/"]; urls[14]=["extralargeyellow", "http://www.somedomain.com/"]; urls[15]=["extralargegreen", "http://www.somedomain.com/"]; urls[16]=["xxlargered", "http://www.somedomain.com/"]; urls[17]=["xxlargeblue", "http://www.somedomain.com/"]; urls[18]=["xxlargeyellow", "http://www.somedomain.com/"]; urls[19]=["xxlargegreen", "http://www.somedomain.com/"]; function jumptolink(el){ var urlbase=el.value.toLowerCase().replace(/ /g, ''); for (var i_tem = 0; i_tem < urls.length; i_tem++) if (urls[i_tem][0]==urlbase){ window.open(urls[i_tem][1],target); return; } else window.open(urlbase+'.htm',target); }

Replace http://www.somedomain.com/ in each array entry with the desired url. If you want some of them to still go to the page that would have been named in the original method, remove the entry from the array but, remember - the numbers must still run in sequence. These numbers:

Code:

urls[2]=["smallyellow", "http://www.somedomain.com/"]; urls[3]=["smallgreen", "http://www.somedomain.com/"];
09-23-2006, 08:33 AM
thewebmacster

Thank You! Everything works now, except for when I ad an image button to it. Is there any way around this problem? and is there function option that would hide the text blocks that display the text that displays in the text area?
09-23-2006, 06:16 PM
jscheuer1

The image button, if it is a true input type="image" should behave the same as long as it is named the same as the input type="button" that it replaced. If it is a linked image, retain the input type="button" but change it's type attribute to "hidden" (you can also remove its style). Then make your linked image like so:

HTML Code:

<a href="#" onclick="jumptolink(document.form2.thebut);return false;"><img src="button.gif" border="0"></a>

Quote:

is there function option that would hide the text blocks that display the text that displays in the text area?

There are no textarea tags in the markup I posted. If you mean the text input tags, I think so but, am not sure what you mean by 'text blocks'. If you mean the border, that is what the style border:0; does. If you simply don't want them seen at all, change their type from "text" to "hidden".
09-24-2006, 01:43 AM
thewebmacster

Awesome! I have another question :) Is it possible to create values for each option and have the text used in the values to deturmine the outcome for each drop down so incase there's a character in the item label such as ",éüå that may not be understood by server?
09-24-2006, 05:52 PM
jscheuer1

OK, first of all, if you are using any type of image for your 'go' button, you can get rid of this:

Code:

butt.style.backgroundColor=sels[c-1].options[sels[c-1].selectedIndex].text.toLowerCase(); butt.style.color=sels[c-1].options[sels[c-1].selectedIndex].text.toLowerCase()=='yellow'? 'black' : 'white';

If you want to use the select option's values instead of their text, you need to set a value for each option and change this:

Code:

butt.value=sels[(c>1? 0 : 1)].options[sels[(c>1? 0 : 1)].selectedIndex].text+' '+sels[c-1].options[sels[c-1].selectedIndex].text;

to:

Code:

butt.value=sels[(c>1? 0 : 1)].options[sels[(c>1? 0 : 1)].selectedIndex].value+' '+sels[c-1].options[sels[c-1].selectedIndex].value;