Solved

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

Posted on 2008-06-24
11
183 Views
Last Modified: 2010-04-21
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
Comment
Question by:RgrWalker
  • 7
  • 4
11 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 21855582
>>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
 
LVL 82

Expert Comment

by:hielo
ID: 21855589
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
 

Author Comment

by:RgrWalker
ID: 21855743
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:RgrWalker
ID: 21855781
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
 
LVL 82

Expert Comment

by:hielo
ID: 21855832
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
 

Author Comment

by:RgrWalker
ID: 21855872
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
 

Author Comment

by:RgrWalker
ID: 21855922
With what I said above, do you need more code than what I'm giving you?
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 21856063
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
 

Author Comment

by:RgrWalker
ID: 21856346
THat worked Perfectly.  Thank you
0
 

Author Closing Comment

by:RgrWalker
ID: 31470127
OUTSTANDING Job!  Thank you so much!
0
 

Author Comment

by:RgrWalker
ID: 21856354
Question, That code doesn't have any sensitive information in it does it?
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question