asked on

I have a Problem with a Dropdown List returning an Image and listing

Ok, I have a Dropdown list on a Web Page that has Colors and to the Right of the Dropdown list is an Image of that Color. For example

Red
Blue IMAGE
Green
Yellow

Once the user selects the Color and selects Submit, it takes the user to the check out and under Color places the Color.

My problem though it is placing the Value Line as the Color. Here is the Code that I'm working with.

</div>
<table><tr><td><input type="hidden" name="on0" value="Color">Color</td><td>
<select name="os0" onchange="selectimage();">
<option value="images/jJB.jpg">Blue</option>
<option value="images/jBE.jpg">Brown</option>
<option value="images/jBB.jpg">Black</option>
<option value="images/jSD.jpg">White</option>
</select>

How do I have my Dropdown list select the Image to the Right and list the Correct Color?

hielo

>>is placing the Value Line as the Color
Not sure what you mean by that, but if you are trying to extract the actual color, refer to this:

is placing the Value Line as the Color

Open in new window

hielo

My apologies for that. Here it is:

<script type="text/javascript">
function selectimage(o)
{
	var theValue=o.value;
	var theText = o.options[o.options.selectedIndex].text;
	alert(theValue + " " + theText )
}
</script>
<table><tr><td><input type="hidden" name="on0" value="Color">Color</td><td>
<select name="os0" onchange="selectimage(this);">
  <option value="images/jJB.jpg">Blue</option>
  <option value="images/jBE.jpg">Brown</option>
  <option value="images/jBB.jpg">Black</option>
  <option value="images/jSD.jpg">White</option>
</select>

Open in new window

RgrWalker

ASKER

So will the script you wrote replace the script I already have that is...

<script>

</script>

RgrWalker

ASKER

Am I allowed to give my web address so you can see what it's doing and what I need it to do? I think that would help explain it better.

hielo

assuming that in this line:
<table><tr><td><input type="hidden" name="on0" value="Color">Color</td><td>
you are trying to change it to:
<table><tr><td><input type="hidden" name="on0" value="Color">Brown</td><td>

when Brown is selected, then you would use:

<table><tr><td><input type="hidden" name="on0" value="Color"><span id="theColor">Color</span></td><td>
<select name="os0" onchange="selectimage(this);">
  <option value="images/jJB.jpg">Blue</option>
  <option value="images/jBE.jpg">Brown</option>
  <option value="images/jBB.jpg">Black</option>
  <option value="images/jSD.jpg">White</option>
</select>
<script type="text/javascript">
 
 function selectimage(o)
      {      
	 var theText = o.options[o.options.selectedIndex].text;
	document.getElementById("theColor").innerHTML=theText;
            check = document.getElementById('selection').src;
            var x = document.getElementById('os0').value;
            
            if(check=="images/jBB.jpg") {
                  document.getElementById('selection').src = x;
            } else {
                  document.getElementById('selection').src = x;
                  return false;
            }
      }
 
</script>

Open in new window

RgrWalker

ASKER

Here is the Address of the Page I'm working on.

http://www.southernsportsman.org/XJigSellXEE.htm

If you go to that site and Select the Color you will see the Image change colors to the Right. Now if I choose Blue for Example, when I go to the Add to Cart button the page for the Add to Cart is not showing Color: Blue, It's showing Color: image/jBB.jpg

I need it to show the Word Blue instead of image/jBB.jpg

RgrWalker

ASKER

With what I said above, do you need more code than what I'm giving you?

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

RgrWalker

ASKER

THat worked Perfectly. Thank you