combo box 2

[GUJUm0deL]

This is a sample combo box :

<select name="ffield10">
	<option selected="selected" value="red, 333, No, 1, [COLOR=red]finalhopetest.jpg[/color]">red</option>
	<option value="blue, 0.00, No, 0.00, [COLOR=red]cgsdgoatt.jpg[/color]">blue</option>
	<option value="green, 0.00, No, 0.00, [COLOR=red]somthid.jpg[/color]">green</option>
</select>

The last item in the "value" attribute is an image that is associated with this item. What I'd like to do is, say if the user chose the 'blue' option, have a link appears whereby the user can click to see the image associated with this option. In the case of the 'blue' the image associated is cgsdgoatt.jpg.

How can I do this?

Thanks in advance.

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[kaht]

What part of this are you having problems with?

[ol][li]Creating the link (in reality the link shouldn't need to be created, it should always exist since there will always be at least one of the options selected)[/li][li]Extracting the image name from the dropdown[/li][li]Assigning the image name to the link[/li][/ol]

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[GUJUm0deL]

Hi kaht,

Assigning the image name to the link. This is how far I got:

<form method="post" action="" name="myForm">
	<select name="ffield10" onChange="displaydesc(document.myForm.ffield10, thetext1, 'textcontainer1')">
		<option selected="selected" value="red, 333, No, 1, [COLOR=red]finalhopetest.jpg[/color]">red</option>
		<option value="blue, 0.00, No, 0.00, [COLOR=red]cgsdgoatt.jpg[/color]">blue</option>
		<option value="green, 0.00, No, 0.00, [COLOR=red]somthid.jpg[/color]">green</option>
	</select>
	<br>
	<span id="textcontainer1" align="left" style="font:italic 13px Arial"></span>
	
	<script type="text/javascript">
		var thetext1=new Array()
		thetext1[0]="<a href='[b]???[/b]'>some image for option 1</a>"
		thetext1[1]="<a href='[b]???[/b]'>some image for option 2</a>"
		thetext1[2]="<a href='[b]???[/b]'>some image for option 3</a>"
		
		function displaydesc(which, descriptionarray, container){
		if (document.getElementById)
			document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
		}
		
		displaydesc(document.myForm.ffield10, thetext1, 'textcontainer1')
	</script>
</form>

I also want to note that in this example, I have 3 options in the drop-down, another item may have 5, yet another may have 2. Can I also do something like a loop over the <option> and get the image name so I can assign it to thetext1 array?

If there is a better way to do this, please let me know.

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[kaht]

I can't really give you a code example since you didn't post he code for the displaydesc function. But, to extract the image name from the dropdown - just use the split function:

    <select name="ffield10" onChange="alert(this.value.[!]split(',')[/!][4]">
        <option selected="selected" value="red, 333, No, 1, finalhopetest.jpg">red</option>
        <option value="blue, 0.00, No, 0.00, cgsdgoatt.jpg">blue</option>
        <option value="green, 0.00, No, 0.00, somthid.jpg">green</option>
    </select>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[GUJUm0deL]

I did post the displaydesc function. It's right under the thetext1[2]="<a href='???'>some image for option 3</a>" line.

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[GUJUm0deL]

I also want to note that in this example, I have 3 options in the drop-down, another item may have 5, yet another may have 2. Can I also do something like a loop over the <option> and get the image name so I can assign it to thetext1 array?

BTW, what I meant by this was that from the CMS, the admin has the ability to add as many drop-down items as they want and attach them to any productid. So, productid 1 may have a drop down of three options, while productid 9 can have a drop down of 4 options.

What I'd like to do is no matter what the product id is, or however many options there are, grab the image name from the list and assign it to the link.

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[kaht]

Sorry, I had a brain-fart and didn't see your function declaration.

BTW, what I meant by this was that from the CMS, the admin has the ability to add as many drop-down items as they want and attach them to any productid. So, productid 1 may have a drop down of three options, while productid 9 can have a drop down of 4 options.

When you say this, do you mean that a <select> box could have 3 or 4 <option> tags inside it, or that the value of each <option> tag could have 3 or 4 values assigned to it (separated by commas)?

I took your explanation to mean the former - in which case my code snipped should have worked.

If it means the latter, then I would use regexp to check for an image - I'd likely do this by searching for the .jpg extension although if you're using .gif or .png files then you'll have to adjust it.

Here's an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function findImage(str) {
   var imageName = /\b\S+\.jpg/.exec(str);
   if (imageName == null) {
      alert("no image name could be found");
   }
   else {
      alert(imageName[0]);
   }
}

</script>

<style type="text/css"></style>

</head>
<body>

<select name="ffield10" onchange="findImage(this.value)">
    <option selected="selected" value="red, 333, No, 1, abc, xyz, AsManyCommaSeparatedValuesAsYouWouldLike, finalhopetest.jpg ">red</option>
    <option value="blue, 0.00, No, 0.00, cgsdgoatt.jpg ">blue</option>
    <option value="green, 0.00, No, 0.00, somthid.jpg ">green</option>
</select>

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[GUJUm0deL]

Hey kaht, thanks. You are right about the former.

The <select> can have 3,4,5,10,etc <option> tags. But the value of the option will always be a set number list and the image reference will always be the last item in the list.

EX 1:
<select name="ffield10" onChange="displaydesc(document.myForm.ffield10, thetext1, 'textcontainer1')">
   <option selected="selected" value="red, 333, No, 1, [COLOR=red]finalhopetest.jpg[/color]">red</option>
   <option value="blue, 0.00, No, 0.00, [COLOR=red]cgsdgoatt.jpg[/color]">blue</option>
   <option value="green, 0.00, No, 0.00, [COLOR=red]somthid.jpg[/color]">green</option>
</select>

EX 2:
<select name="ffield23" onChange="displaydesc(document.myForm.ffield23, thetext1, 'textcontainer1')">
   <option selected="selected" value="red, 333, No, 1, [COLOR=red]finalhopetest.jpg[/color]">red</option>
   <option value="blue, 0.00, No, 0.00, [COLOR=red]cgsdgoatt.jpg[/color]">blue</option>
   <option value="green, 0.00, No, 0.00, [COLOR=red]somthid.jpg[/color]">green</option>
   <option value="yellow, 67, No, 2, [COLOR=red]qwerty.jpg[/color]">yellow</option>
   <option value="purple, 121, No, 12, [COLOR=red]asdfgh.jpg[/color]">purple</option>
</select>

EX 3:
<select name="ffield213" onChange="displaydesc(document.myForm.ffield213, thetext1, 'textcontainer1')">
   <option selected="selected" value="red, 333, No, 1, [COLOR=red]finalhopetest.jpg[/color]">red</option>
   <option value="blue, 0.00, No, 0.00, [COLOR=red]cgsdgoatt.jpg[/color]">blue</option>
   <option value="neon, 44, No, 33, [COLOR=green][b]x[/b][/color]">neon</option>
</select>

Now, if you look at EX 3, the option value for neon" has an x instead of an image name. The reason for this is, if an <option> does not have an image I use a place-holder cause the list must be a set number of items. Aside from assigning the image name to the link, I also need to make sure if x is in the last position do nothing.

Is this still doable?

(please say yes, please say yes, please say yes, )

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[GUJUm0deL]

kaht, adding alert(this.value.split(',')[4]) as you showed above does give an alert of the image name. However, how do I incorporate that into my code? How do I pass the image name into:
thetext1[0]="<a href='???'>some image for option 1</a>"
thetext1[1]="<a href='???'>some image for option 2</a>"
thetext1[2]="<a href='???'>some image for option 3</a>"

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[BillyRayPreachersSon]

To always obtain the last item in the option value, no matter how many pieces there are, use the "length" method of the Array object. Given you also want to do extra processing, I'd break this out into a function now:

function parseValue(dataToParse) {
   var items = dataToParse.split(',');
   var filename = items[items.length-1];
   if (filename != ' x') {
      // Now put filename wherever you want it
   }
}

...

onchange="parseValue(this.value);"

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[GUJUm0deL]

Thanks Dan for helping. I can make all this work separately. But how do I bring this all together?

How do I take what I have now:

<form method="post" action="" name="myForm">
    <select name="ffield10" [b]onChange="displaydesc(document.myForm.ffield10, thetext1, 'textcontainer1')"[/b]>
        <option selected="selected" value="red, 333, No, 1, finalhopetest.jpg">red</option>
        <option value="blue, 0.00, No, 0.00, cgsdgoatt.jpg">blue</option>
        <option value="green, 0.00, No, 0.00, somthid.jpg">green</option>
    </select>
    <br>
    <span id="textcontainer1" align="left" style="font:italic 13px Arial"></span>
    
    <script type="text/javascript">
        var thetext1=new Array()
        [COLOR=red]thetext1[0]="<a href='[b]imagenamegoes here[/b]'>some image for option 1</a>"
        thetext1[1]="<a href='[b]imagenamegoes here[/b]'>some image for option 2</a>"
        thetext1[2]="<a href='[b]imagenamegoes here[/b]'>some image for option 3</a>"[/color]
        
        [b]function displaydesc[/b](which, descriptionarray, container){
        if (document.getElementById)
            document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
        }
        
        [b]displaydesc[/b](document.myForm.ffield10, thetext1, 'textcontainer1')
    </script>
</form>

And, incorporate the code which assigns the image name to thetext1[x] variable (which stores the <a href> tag)?



_____________________________
Just Imagine.

http://www.imajinarts.com

 

[BillyRayPreachersSon]

I don't get why you'd want to populate an array in advance, when it's only being used in one place. In fact, I don't understand why you need an array at all if the only real difference between items in it is the image URL.

Perhaps the code you've given us is a cut-down example... if so, then this might not be right for you (and so we'd need more details). However, if it isn't, then this should do something close to what you're after:

<form method="post" action="" name="myForm">
	<select name="ffield10" onChange="displaydesc([!]this[/!], thetext1, 'textcontainer1')">
		<option selected="selected" value="red, 333, No, 1, finalhopetest.jpg">red</option>
		<option value="blue, 0.00, No, 0.00, cgsdgoatt.jpg">blue</option>
		<option value="green, 0.00, No, 0.00, somthid.jpg">green</option>
	</select>
	<br>
	<span id="textcontainer1" align="left" style="font:italic 13px Arial"></span>

	<script type="text/javascript">
		[!]function displaydesc(which, descriptionarray, container){
			var whichValue = which.options[which.selectedIndex].value;
			var whichValues = whichValue.split(',');
			var imageSrc = whichValues[whichValues.length - 1];
			
			var theHtml = '<a href="' + imageSrc + '">some image for an option</a>';
			document.getElementById(container).innerHTML = theHtml;
		}[/!]

		displaydesc(document.myForm.ffield10, thetext1, 'textcontainer1');
	</script>
</form>

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[kaht]

Dan, thanks for filling in - I went home for the night and never check the site while I'm at home. GUJUModel - Dan's advice looks spot-on, so is this issue resolved?

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[GUJUm0deL]

Dan, I don't have to populate the array in advance. I was just trying different ideas to see which would be the best method.

I tried your example, but got an error "thetext1 is not defined". I changed both reference of thetext1, to theHtml but then got "theHtml is not defined".



_____________________________
Just Imagine.

http://www.imajinarts.com

 

[GUJUm0deL]

I got it. I had to remove the references to 'thetext1" and "descriptionarray" from the code since they are no longer needed.

This is how I have it now.

<form method="post" action="" name="myForm">
    <select name="ffield10" onChange="displaydesc(this, 'textcontainer1')">
        <option selected="selected" value="red, 333, No, 1, finalhopetest.jpg">red</option>
        <option value="blue, 0.00, No, 0.00, cgsdgoatt.jpg">blue</option>
        <option value="green, 0.00, No, 0.00, somthid.jpg">green</option>
    </select>
    <br>
    <span id="textcontainer1" align="left" style="font:italic 13px Arial"></span>

    <script type="text/javascript">
        function displaydesc(which, container){
            var whichValue = which.options[which.selectedIndex].value;
            var whichValues = whichValue.split(',');
            var imageSrc = whichValues[whichValues.length - 1];
            
            var theHtml = '<a href="' + imageSrc + '">some image for an option</a>';
            document.getElementById(container).innerHTML = theHtml;
        }

        displaydesc(this, 'textcontainer1');
    </script>
</form>

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[GUJUm0deL]

Ok, I made ONE more change to see if no image is in the last position then load nothing.

<form method="post" action="" name="myForm">
    <select name="ffield10" onChange="displaydesc(this, 'textcontainer1')">
        <option selected="selected" value="red, 333, No, 1, [COLOR=blue]optionimage1.jpg[/color]">red</option>
        <option value="blue, 0.00, No, 0.00, [COLOR=blue]optionimage2.jpg[/color]">blue</option>
        <option value="green, 0.00, No, 0.00, [COLOR=red]x[/color]">green</option>
    </select>
    <br>
    <span id="textcontainer1" align="left" style="font:italic 13px Arial"></span>

    <script type="text/javascript">
        function displaydesc(which, container){
            var whichValue = which.options[which.selectedIndex].value;
            var whichValues = whichValue.split(',');
            var imageSrc = whichValues[whichValues.length - 1];
            
			if (imageSrc != ' x') {
            	var theHtml = '<a href="' + imageSrc + '">some image for an option</a>';
            	document.getElementById(container).innerHTML = theHtml;
			} else {
            	var theHtml = '';
            	document.getElementById(container).innerHTML = theHtml;			
			}
        }

        displaydesc(this, 'textcontainer1');
    </script>
</form>

The last item has an x instead of an image name because if there is no image associated with that option, I still need to have a place holder as the comma separated list needs to be a set number to items.

I ran that in IE6 and FF2.0.0.13 and it worked! Will this work in IE7? I can't test that cause I do not have IE7.

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[GUJUm0deL]

I checked this in FireBug, and it gives this error: which.selectedIndex has no properties

The code still works fine, and nothing wrong but why would it give that error?

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[kaht]

I've never found an instance where checking the direct value of a <select> dropdown didn't work. The options[selectedIndex] method is the first one that I learned, but you should be able to get away with this instead:

//var whichValue = which.options[which.selectedIndex].value;
var whichValue = which.value;

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[GUJUm0deL]

kaht, I also have seen the syntax options[selectedIndex], without any issues. Just out of curiousity, I commented out that line and inserted in what you suggested, and now FF throws: whichValue has no properties

var whichValue = which.options[which.selectedIndex].value; works great in FF and IE. I know the syntax used it correct also. Oh well...maybe this is one of those odd browser things.

_____________________________
Just Imagine.

http://www.imajinarts.com

 

[kaht]

I also think that which used to be an old reserved word in netscape. Maybe try using a different name for the parameter that is being passed in? I usually use obj or selObj when passing html object references.

That suggestion is merely grasping at straws though....

Maybe one more thing:

    <script type="text/javascript">
        function displaydesc(which, container){
            var whichValue = which.options[which.selectedIndex].value;
            var whichValues = whichValue.split(',');
            var imageSrc = whichValues[whichValues.length - 1];
            
            if (imageSrc != ' x') {
                var theHtml = '<a href="' + imageSrc + '">some image for an option</a>';
                document.getElementById(container).innerHTML = theHtml;
            } else {
                var theHtml = '';
                document.getElementById(container).innerHTML = theHtml;            
            }
        }

        [!]window.onload = function () {[/!]displaydesc(this, 'textcontainer1');[!]};[/!]
    </script>

It is bad practice to call a function that references HTML elements inline like that. At that point the element may not reside in the DOM, which will make the reference to it illegal (which very well may be the reason why you're getting the error). If you wait until the page has loaded before you call the function you can ensure that the element exists before referencing it.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]