[SOLVED] Color Selection with Radio Button Help

[TRI0N]

Okay here is the scoop. I'm trying to get it so if you select a radio button under a color patern it will then pop a larger preview of the color and its name up for their selection.. However this is the problem. When looking for the radio id of "tablecloth" it will always find the first radio enty "Black Classic". No matter what color I select. Obviously because it is the first color in the code that is found so it uses that one every time.

 

Here is the table to select the colors. Note: I have only the first two colors coded to test things out to find that this will not work.

 

Perhaps there is a way to make it so "onClick" it passes the information for each color correctly? Dunno any help will be great!

 

Table for Color Selection

<table width="100%" border="0" cellspacing="0" cellpadding="2">
                     <tr>
                       <td valign="top"><table width="0%" border="0" cellspacing="0" cellpadding="0">
                         <tr>
                           <td><p align="center"><img src="images/linen/Copy of lBlackSolidSm.jpg" alt="Black Classic" width="20" height="20" value="Black Classic" onchange="colorMe1();"></p></td>
                           <td><p align="center"><img src="images/linen/Copy of lBlackImperialStripeSm.jpg" alt="Black Imperial" width="20" height="20"></p></td>
                           <td><p align="center"><img src="images/linen/Copy of lBlueCheckSm.jpg" alt="Blue Checkerd" width="20" height="20"></p></td>
                           <td><p align="center"><img src="images/linen/Copy of lBrownSolidSm.jpg" alt="Brown Classic" width="20" height="20"></p></td>
                           <td><p align="center"><img src="images/linen/Copy of lBurgundySolidSm.jpg" alt="Burgundy Classic" width="20" height="20"></p></td>
                           <td><p align="center"><img src="images/linen/Copy of lBurgundyImperialStripeSm.jpg" alt="Burgundy Imperial" width="20" height="20"></p></td>
                           <td><p align="center"><img src="images/linen/Copy of ButtercupClassicSm.jpg" alt="Buttercup Classic" width="20" height="20"></p></td>
                           <td><p align="center"><img src="images/linen/Copy of CeladonClassicSm.jpg" alt="Celadon Classic" width="20" height="20"></p></td>
                           <td><p align="center"><img src="images/linen/Copy of lCeriseSolidSm.jpg" alt="Cerise Classic" width="20" height="20"></p></td>
                           <td><p align="center"><img src="images/linen/Copy of lForestSolidSm.jpg" alt="Forest Classic" width="20" height="20"></p></td>
                           <td><p align="center"> </p></td>
                         </tr>
                         <tr>
                           <td><p align="center">
                               <input type="radio" name="tablecloth" id="tablecloth" value="Black Classic" onClick="colorMe();">
                             </p></td>
                           <td><p align="center">
                             <input type="radio" name="tablecloth" id="tablecloth" value="Black Imperial" onClick="colorMe();">
                           </p></td>
                           <td><p align="center">
                             <input type="radio" name="tablecloth" id="tablecloth" value="Blue Checkerd" onClick="colorMe();">
                           </p></td>
                           <td><p align="center">
                             <input type="radio" name="tablecloth" id="tablecloth" value="Brown Classic" onClick="colorMe();">
                           </p></td>
                           <td><p align="center">
                             <input type="radio" name="tablecloth" id="tablecloth" value="Burgundy Classic" onClick="colorMe();">
                           </p></td>
                           <td><p align="center">
                             <input type="radio" name="tablecloth" id="tablecloth" value="Burgundy Imperial" onClick="colorMe();">
                           </p></td>
                           <td><p align="center">
                             <input type="radio" name="tablecloth" id="tablecloth" value="Buttercup Classic" onClick="colorMe();">
                           </p></td>
                           <td><p align="center">
                             <input type="radio" name="tablecloth" id="tablecloth" value="Celadon Classic" onClick="colorMe();">
                           </p></td>
                           <td><p align="center">
                             <input type="radio" name="tablecloth" id="tablecloth" value="Cerise Classic" onClick="colorMe();">
                           </p></td>
                           <td><p align="center">
                             <input type="radio" name="tablecloth" id="tablecloth" value="Forest Classic" onClick="colorMe();">
                           </p></td>
                           <td><p align="center"> </p></td>
                         </tr>
                         <tr>
                           <td colspan="11"><hr></td>
                           </tr>
                         <tr>
                           <td> </td>
                           <td> </td>
                           <td> </td>
                           <td> </td>
                           <td> </td>
                           <td> </td>
                           <td> </td>
                           <td> </td>
                           <td> </td>
                           <td> </td>
                           <td> </td>
                         </tr>
                       </table>
                       </td>
                       <td align="center" valign="top"><table width="100" height="100" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
                         <tr>
                           <td><p align="center"><span id="color1"></span></p></td>
                         </tr>
                       </table></td>
                     </tr>
                     <tr>
                       <td valign="top" class="style9"><p align="center" class="style9">Linen Provided by BBJ Linen</p></td>
                       <td align="center" class="style1" valign="top"><span id="name1"></span></td>
                     </tr>
                   </table>

 

 

Here is the JavaScript that I'm using to determin the preview to show upon selection of a color.

<script type="text/javascript"> 
function colorMe(){ 

vn1 = document.getElementById('tablecloth').value ;

if(vn1 == 'Black Classic'){
img1 = '<img src="images/linen/lBlackSolidSm.jpg" width="100" height="100">'
nam1 = vn1
}
if(vn1 == 'Black Imperial'){
img1 = '<img src="images/linen/lBlackImperialStripeSm.jpg" width="100" height="100">'
nam1 = vn1
}
if(vn1 == 'Blue Checkerd'){
img1 = '<img src="images/linen/lBlueCheckSm.jpg" width="100" height="100">'
nam1 = vn1
}

document.getElementById('color1').innerHTML=img1 ;
document.getElementById('name1').innerHTML=nam1 ;
}
</script>

 

Again any help getting this to work would be great.  If I can make this a simple jave rather then a complex flash its worth the time other then that I'd rather not do all this in flash and require people to have it.

 

 

[TRI0N]

Here is the fix.. Dang took me a little bit to see where to remove the road block but here it is for anyone else that want to use something of the same nature.

 

Right under funcion colorMe() {

 

myOption = -1;
for (i=form1.tablecloth.length-1; i > -1; i--) {
if (form1.tablecloth[i].checked) {
myOption = i; i = -1;
}
}

//vn1 new code line
vn1 = form1.tablecloth[myOption].value ;

 

Za-Poof! It can now determine what radio button is selected and its value.