• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

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?
0
RgrWalker
Asked:
RgrWalker
  • 7
  • 4
1 Solution
 
hieloCommented:
>>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

0
 
hieloCommented:
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

0
 
RgrWalkerAuthor Commented:
So will the script you wrote replace the script I already have that is...

<script>
<!--
      function selectimage()
      {      
            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>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
RgrWalkerAuthor Commented:
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.
0
 
hieloCommented:
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

0
 
RgrWalkerAuthor Commented:
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
0
 
RgrWalkerAuthor Commented:
With what I said above, do you need more code than what I'm giving you?
0
 
hieloCommented:
save as test.html and try it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
 
<head><base href="http://www.southernsportsman.org/XJigSellXEE.htm"/>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>The Jig n' Pig</title>
<script>
<!--
      function selectimage()
      {      
            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;
            }
      }
	 function swap()
	 {
	 	var d = document.getElementById("os0");
		d.options[d.selectedIndex].value=d.options[d.selectedIndex].text;
		
	 return true;
	 }
-->
</script>
<style type="text/css">
 p.MsoNormal
	{margin-bottom:.0001pt;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";
	color:windowtext;
	margin-left: 0in;
	margin-right: 0in;
	margin-top: 0in;
}
p
	{margin-right:0in;
	margin-left:0in;
	font-size:12.0pt;
	font-family:"Times New Roman","serif";
	color:#0F0000;
}
a:link
	{color:blue;
	text-decoration:underline;
	text-underline:single;
}
.style1 {
	text-align: center;
}
</style>
<base target="_self" />
</head>
 
<body style="background-image: url('images/Southern%20Sportsman%20Images/burlapSack.gif')">
 
</body>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="return swap()">
<input type="hidden" name="on0" value="Size">
<div class="style1">
 
<p class="MsoNormal" style="text-align: center; font-family: 'Frutiger SCIN Rm v.1'; font-size: x-large; color: #FFFFFF">
&nbsp;</p>
 
</div>
<table><tr><td><input type="hidden" name="on0" value="Color">Color</td><td>
<select name="os0" id="os0" onchange="selectimage();">
  <option value="images/jJB.jpg">JuneBug</option>
  <option value="images/jBE.jpg">Brown</option>
  <option value="images/jBB.jpg">Blue</option>
  <option value="images/jSD.jpg">Shad</option>
</select>
<img src="images/jBB.jpg" width="100" height="100" id="selection" /></td>
</td></tr><tr><td><input type="hidden" name="on1" value="Size">Size</td><td>
<select name="os1"><option value="3/4 Ounce">3/4 Ounce<option value="1/2 Ounce">1/2 Ounce<option value="3/8 Ounce">3/8 Ounce</select>
</td></tr></table><input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but10.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="images/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="mumpower123@bellsouth.net">
<input type="hidden" name="item_name" value="Mumpys Jigs">
<input type="hidden" name="item_number" value="00001">
<input type="hidden" name="amount" value="3.00">
<input type="hidden" name="page_style" value="Primary">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="return" value="http://southernsportsman.org">
<input type="hidden" name="cancel_return" value="http://southernsportsman.org">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</form>
 
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="mumpower123@bellsouth.net">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_viewcart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<input type="hidden" name="display" value="1">
<input type="hidden" name="page_style" value="Primary">
</form>
</html>

Open in new window

0
 
RgrWalkerAuthor Commented:
THat worked Perfectly.  Thank you
0
 
RgrWalkerAuthor Commented:
OUTSTANDING Job!  Thank you so much!
0
 
RgrWalkerAuthor Commented:
Question, That code doesn't have any sensitive information in it does it?
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now