?
Solved

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

Posted on 2008-06-24
11
Medium Priority
?
191 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
How To Reduce Deployment Times With Pre-Baked AMIs

Even if we can't include all the files in the base image, we can sometimes include some of the larger files that we would otherwise have to download, and we can also sometimes remove the most time-consuming steps. This can help a lot with reducing deployment times.

 

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 2000 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

Give Your Engineering Team a Productivity Boost

Learn why container technology is so powerful and how it can provide your team with productivity gains and other benefits.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses

801 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