radio buttons to images

[Cullyn78]

It works great but when I put it into the system we use it doesnt seem to work. Here is the code that generates our radio buttons:

<td class="ProductLabel" valign="top">Colors:</td><td align="right" valign="top" style="width:6px;"><span id="" style="color:Red;">*</span></td><td class="ProductControl" valign="bottom"><span id="t1_t2_c_p_tmplProduct_Colors"><table id="t1_t2_c_p_tmplProduct_Colors_ddl" class="Radios" border="0">
<tr>
<td><input id="t1_t2_c_p_tmplProduct_Colors_ddl_0" type="radio" name="t1:t2:c:tmplProduct:Colors_ddl" value="-pZg4r6LY4y6l1mwON6vWdXNIKNwNuRoGrbJNMpXBu88KH7wetX-ppew-e-e" checked="checked" /><label for="t1_t2_c_p_tmplProduct_Colors_ddl_0">White</label></td>
</tr><tr>
<td><input id="t1_t2_c_p_tmplProduct_Colors_ddl_1" type="radio" name="t1:t2:c:tmplProduct:Colors_ddl" value="avQf-pnmpWNn3QtFdZddIh9hJb5Gyy9MaNSudtzF-pb1I0dPLgDKNPfA-e-e" /><label for="t1_t2_c_p_tmplProduct_Colors_ddl_1">Blue</label></td>

</tr><tr>
<td><input id="t1_t2_c_p_tmplProduct_Colors_ddl_2" type="radio" name="t1:t2:c:tmplProduct:Colors_ddl" value="Ta6MExshiELaTqgKexq7wwOD-s3DK-staSt53nRme9KGDcXOirTZ-sYRg-e-e" /><label for="t1_t2_c_p_tmplProduct_Colors_ddl_2">Sherbert</label></td>
</tr>
</table><span controltovalidate="t1_t2_c_p_tmplProduct_Colors_ddl" errormessage="A value is required for Colors." display="None" id="t1_t2_c_p_tmplProduct_validator1" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;"></span></span></td>

[JMRKER]

Which suggested script are you using? It does not look a bit like that of post #14.
If you cannot post the portions significant to the problem, at least post a link to the site.

Also you should surround your forum scripts with [ code] and [ /code] tags (without the spaces)
to make it easier to read without the smilies you have imbedded.

[Cullyn78]

Sorry about that it was my fault. I didnt know about the code tags. Here is the code for the page. I thought I could take the code you provided and change the id tags but it didnt work with this stupid system we have. Here is the full code:

http://themccluskeyclan.com/htmlcode.txt

[JMRKER]

You have an awful lot of code to view there.
Which suggested script did you use and where did you put it?
I don't see it inline and I cannot see the external JS or CSS file contents.
Where did you put the color boxes to click on to change the associated radio buttons?
Where are the functions to cause the radio buttons to be set?

[Cullyn78]

I pulled the style out of the css file and made it inline. I guess I should have kept it that way. Then I made sure the javascript was showing up. Thank you for being patient with me on this one. I'm really lost.

http://themccluskeyclan.com/htmlcode.txt

[JMRKER]

I pulled the style out of the css file and made it inline. I guess I should have kept it that way. Then I made sure the javascript was showing up. Thank you for being patient with me on this one. I'm really lost.

http://themccluskeyclan.com/htmlcode.txt

So does that mean the program works now or not?

Do you have a link to the site so we can get the error messages, if any?

[Cullyn78]

Its not really giving much information its just not working. Here is a link:

Link to Product

The javascript is in the code but it is not working.

[JMRKER]

If you use FF browser, go to Tools-Error Console
Clear the console and refresh the page for a list of problems

Most appear to be CSS warnings, but the one that stands out is the following:

<script type="text/javascript">
	$(function() {
		var specForm = $451.createSpecForm();
		var get = specForm.get;
		
		<script>
  function setRBtn(RBtnGroup,which) {
  var sel = document.getElementsByName(RBtnGroup);

You have 2 <script> tags. Eliminate the one in RED

I don't know if that will fix all your problems, but you should have one less!

[Cullyn78]

I took out the double script. And I got the error console. Product still looks the same but without the first error.

[Cullyn78]

Using the Error Console it looks like the syntax error is what might be the issue and I would guess this is what it is based on the part that there isnt an RBTnGroup:

Error: syntax error
Source File: http://www.four51.com/UI/Distributor...AddToOrderForm
Line: 142, Column: 2
Source Code:
var sel = document.getElementsByName(RBtnGroup);

[JMRKER]

I believe the problem is that you never call the function.

I cannot find any place where you call the setRBtn() function from the HTML
It does not have a RBTGroup unless you call it someplace.

[Cullyn78]

So I need to get the part of your code that says:

<ul id="color_Options">
 <li class="white" onclick="setRBtn('RBtn',0)"></li>
 <li class="blue" onclick="setRBtn('RBtn',1)"></li>
 <li class="green" onclick="setRBtn('RBtn',2)"></li>
 <li class="sherbert" onclick="setRBtn('RBtn',3)"></li>
 <li class="yellow" onclick="setRBtn('RBtn',4)"></li>
 <li class="red" onclick="setRBtn('RBtn',5)"></li>
 <li class="black" onclick="setRBtn('RBtn',6)"></li>
</ul>

into the page right?

[Cullyn78]

Here is the code for the color area without any extra stuff it in. It is the way it is before a product enters it.

<table id="ProductForm">
    <tbody>
        <tr class="ProductEvenRow">
            <td id="ProductLabel">Colors:</td>
            <td class="ProductPrefix"></td>
            <td id="ProductControl">[[Colors]]</td>
        </tr>
        <tr class="ProductOddRow">
            <td id="ProductLabel">Sizes:</td>
            <td class="ProductPrefix"></td>
            <td id="ProductControl">[[Sizes]]</td>
        </tr>
    </tbody>
</table>

[JMRKER]

You could do it like this...

<!DOC HTML>
<html>
<head>
<title> Untitled </title>

<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=247592

function setRBtn(RBtnGroup,which) {
  var sel = document.getElementsByName(RBtnGroup);
  for (var i=0; i<sel.length; i++) {
    if (i == which) {
      sel[i].checked = true;
      document.getElementById('colorChosen').style.backgroundColor=sel[i].value;
    }
  }
}
</script>

<style type="text/css">
#color_Options li {
 width: 20px; height: 20px;
 border: solid 1px #000;
 list-style-type:none;
 float:left;
 margin:3px 3px; padding: 0px; 
}
.blue {background-color: blue;}
.green {background-color: green;}
.sherbert {background-color: orange;}
.yellow {background-color: yellow;}
.red {background-color: red;}
.black {background-color: black;}
.white { background-color: white;}
#colorChosen { 
 width:100px; height:50px;
 border:solid 1px black;
 background-color:white;
 display:block;
}
</style>

</head>
<body>
<table id="ProductForm" border="1">
    <tbody>
        <tr class="ProductEvenRow">
            <td id="ProductLabel">Color:</td>
            <td class="ProductPrefix"></td>
            <td id="ProductControl" valign="top">

Chosen: <div id="colorChosen"></div>

<div id="RBtnBlock" style="display:none;"> 
 <input type="radio" name="RBtn" value="white"> White
 <input type="radio" name="RBtn" value="blue"> Blue
 <input type="radio" name="RBtn" value="green"> Green
 <input type="radio" name="RBtn" value="orange"> Orange
 <input type="radio" name="RBtn" value="yellow"> Yellow
 <input type="radio" name="RBtn" value="red"> Red
 <input type="radio" name="RBtn" value="black"> Black
</div>

<div style="float:left"></div>
 <ul id="color_Options" style="margin:0px 0px;">
  <li class="white" onclick="setRBtn('RBtn',0)"></li>
  <li class="blue" onclick="setRBtn('RBtn',1)"></li>
  <li class="green" onclick="setRBtn('RBtn',2)"></li>
  <li class="sherbert" onclick="setRBtn('RBtn',3)"></li>
  <li class="yellow" onclick="setRBtn('RBtn',4)"></li>
  <li class="red" onclick="setRBtn('RBtn',5)"></li>
  <li class="black" onclick="setRBtn('RBtn',6)"></li>
 </ul>
 <br style="clear:both">

            </td>
        </tr>
        <tr class="ProductOddRow">
            <td id="ProductLabel">Sizes:</td>
            <td class="ProductPrefix"></td>
            <td id="ProductControl">[[Sizes]]</td>
        </tr>
    </tbody>
</table>

</body>
</html>

You can play around with the CSS positioning commands a desired.

Good Luck (again)!