Solved

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

Posted on 2008-06-24
11
186 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

731 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