Solved

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

Posted on 2008-06-24
11
181 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
It’s a strangely common occurrence that when you send someone their login details for a system, they can’t get in. This article will help you understand why it happens, and what you can do about it.
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 fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

744 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

9 Experts available now in Live!

Get 1:1 Help Now