Solved

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

Posted on 2008-06-24
11
182 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
 

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

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem to echo 6 81
Access Control Entries lost in Windows folders 3 48
Configure Robocopy to excluding folders 6 46
aws pricing 2 23
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 …
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

920 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now