Display image when form option selected (with a twist)

JavaScript
1

My head is exploding.

I’m trying to display a corresponding color swatch image (ie. image1.gif, image2.gif) via onChange in a dropdown list. I can make it happen with javascript:


function showimage() {
if (!document.images)
return
document.images.imageDefault.src=
document.form1.vinylColor.options[document.form1.vinylColor.selectedIndex].value
}

The HTML:


<form name="form1" id="form1" method="post" action="theaction.php">
<SELECT id="vinylColor" NAME="vinylColor" SIZE="1" nChange="showimage()">
<option value="image1.gif">120-Blue</option>
<option value="image2.gif">121-Red</option>
<option value="image3.gif">125-Yellow</option>
</select>
</form>

<div id="swatch" width: 145px;"><IMG SRC="blank.gif" NAME="imageDefault" WIDTH="135"
HEIGHT="135" BORDER="0"/>

The problem is the form being output by the script (osCommerce) is like this"


<form>
<select name="id[1]">
<option value="38">120-Blue</option>
<option value="39">121-Red</option>
<option value="40">125-Yellow</option>
</select>
</form>

So, I’m thinking I need to create an array with the corresponding values and image.


#swatches = array('38'=> 'image1.gif', '39'=> 'image2.gif', '40'=> 'image3.gif');

But how do I coordinate the two? I’m a ehhh…ok php programmer, but javascript is totally new.

Any help would be appreciated.

2

you could also rename the images instead of image1.gif 38.gif and just append the .gif to the selected value :slight_smile:

oh and I dont think name=“id[1]” is valid html… I think and other special chars are not allowed in name (and I know for sure not in id=“”)

3 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
var Path='http://www.vicsjavascripts.org.uk/StdImages/';
var ImgAry=new Array('','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');
var $=document.getElementById;

function Swap(obj,id){
 var i=obj.selectedIndex;
 if (i<1){ return; }
 $(id).src=Path+ImgAry[i];
}
//-->
</script></head>

<body>
<select onchange="Swap(this,'MyImg');" >
<option >Select Color</option>
<option >Color Sand</option>
<option >Color Red</option>
<option >Color Blue</option>
<option >Color Green</option>
</select>
<img id="MyImg" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=50 height=50 >

</body>

</html>
4

NikoB…that is a simple yet brilliant idea, I hadn’t thought about that. It may interfer with the value passed to the shopping cart though…I need to think on it. Oh, and the select name=“id=[1]” thats what osCommerce is spitting out. None of the pages are going to validate for many reasons. But, ‘ya gotta dance with the one that brought ya.’

vwphillips…your my hero! Works like a champ (except in FireFox) I get:

Error: uncaught exception: [Exception… “Illegal operation on WrappedNative prototype object” nsresult: “0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)” location: “JS frame :: /my/testing/server/test2.htm :: Swap :: line 17” data: no]

in the Firefox Javascript console. Any thoughts?

5 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
var Path='http://www.vicsjavascripts.org.uk/StdImages/';
var ImgAry=new Array('','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');

function Swap(obj,id){
 var i=obj.selectedIndex;
 if (i<1){ return; }
 document.getElementById(id).src=Path+ImgAry[i];
}
//-->
</script></head>

<body>
<select onchange="Swap(this,'MyImg');" >
<option >Select Color</option>
<option >Color Sand</option>
<option >Color Red</option>
<option >Color Blue</option>
<option >Color Green</option>
</select>
<img id="MyImg" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=50 height=50 >

</body>
6

Thank you Vic! I really appreciate it. Works like a champ.