www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 29 of 29

Thread: radio buttons to images

  1. #16
    Join Date
    Jun 2011
    Posts
    17
    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>

  2. #17
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Question

    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.

  3. #18
    Join Date
    Jun 2011
    Posts
    17
    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

  4. #19
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    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?

  5. #20
    Join Date
    Jun 2011
    Posts
    17
    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

  6. #21
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Question

    Quote Originally Posted by Cullyn78 View Post
    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?

  7. #22
    Join Date
    Jun 2011
    Posts
    17
    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.

  8. #23
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Exclamation

    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:
    Code:
    <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!

  9. #24
    Join Date
    Jun 2011
    Posts
    17
    I took out the double script. And I got the error console. Product still looks the same but without the first error.

  10. #25
    Join Date
    Jun 2011
    Posts
    17
    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);

  11. #26
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    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.

  12. #27
    Join Date
    Jun 2011
    Posts
    17
    So I need to get the part of your code that says:

    Code:
    <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?

  13. #28
    Join Date
    Jun 2011
    Posts
    17
    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.

    Code:
    <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>

  14. #29
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    You could do it like this...
    Code:
    <!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)!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles