Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Need help adjusting my code to suit please

    Hi I have this snippet of code which shows an image based on what radio button is selected, problem is that the names, id's, values etc are dynamically created via the admin panel of my cart so what happens is that the buttons are not recognised as being 'checked' if I make them 'checked'...

    I can sort of see where its trying to check if 'checked' but quite sure how to make it suit my radio button without changing the buttons id's.

    here my code:
    Code:
    <div id="Tabdoc_content3" class="Tabdoc_tabdivcontent" style="background-image:url('/images/back-sweets.png');background-repeat:no-repeat;background-position:center bottom;background-size:100%;" >
     <div class="wrapperAttribsOptions">
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
      <tr valign="top">
      <td>
    <script language="javascript"> 
    function toggle1(showHideDiv, switchImgTag) {
            var ele = document.getElementById(showHideDiv);
            var imageEle = document.getElementById(switchImgTag);
            if(ele.style.display == "block") {
                    ele.style.display = "none";
    		imageEle.innerHTML = '<img src="/images/tabs/button_open_sweet1.gif">';
            }
            else {
                    ele.style.display = "block";
                    imageEle.innerHTML = '<img src="/images/tabs/button_close_sweet1.gif">';
            }
    }
    function toggle2(showHideDiv, switchImgTag) {
            var ele2 = document.getElementById(showHideDiv);
            var imageEle2 = document.getElementById(switchImgTag);
            if(ele2.style.display == "block") {
                    ele2.style.display = "none";
    		imageEle2.innerHTML = '<img src="/images/tabs/button_open_sweet2.gif">';
            }
            else {
                    ele2.style.display = "block";
                    imageEle2.innerHTML = '<img src="/images/tabs/button_close_sweet2.gif">';
            }
    }
    function toggle3(showHideDiv, switchImgTag) {
            var ele3 = document.getElementById(showHideDiv);
            var imageEle3 = document.getElementById(switchImgTag);
            if(ele3.style.display == "block") {
                    ele3.style.display = "none";
    		imageEle3.innerHTML = '<img src="/images/tabs/button_open_sweet3.gif">';
            }
            else {
                    ele3.style.display = "block";
                    imageEle3.innerHTML = '<img src="/images/tabs/button_close_sweet3.gif">';
            }
    }
    </script>
       <table cellpadding="0" cellspacing="0" border="0" width="100%">
       <tr valign="top">
        <td align="center" width="33%">
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?p=1107835#post1107835
    var picFile0 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];  // each can be expanded with more images
    var picFile1 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];
    var picFile2 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];
    var imgPtr = [
    //  [current_image,baseURL,filenames,display_image]
        [0,"/images/tabs/",'imgSrc0'],
        [0,"/images/tabs/",'imgSrc1'],
        [0,"/images/tabs/",'imgSrc2']  // No comma after last entry
    ];
    // Create function to load image
    function loadImg(imgGroup) {
      var picFile = [];  
      var imgID = imgPtr[imgGroup][2];
      switch (imgGroup) {
        case '0' : picFile=[].concat(picFile0); break;
        case '1' : picFile=[].concat(picFile1); break;
        case '2' : picFile=[].concat(picFile2); break;
        default  : alert('Invalid assignment\n'+imgGroup); break;
      }
      var ptr = imgPtr[imgGroup][0];
      if (ptr < 0) { ptr = 0; }
      if (ptr > picFile.length-1) { ptr = picFile.length-1; }
      document.getElementById(imgID).src = imgPtr[imgGroup][1]+picFile[ptr];
      imgPtr[imgGroup][0] = ptr;
      var rbtn = 'rg'+imgGroup+ptr;  // alert(rbtn);
      document.getElementById(rbtn).checked = true;
    }
    // Create link function to switch image backward
    function prev(imgGroup) {
      imgPtr[imgGroup][0]--;
      loadImg(imgGroup);
    }
    // Create link function to switch image forward
    function next(imgGroup){
      imgPtr[imgGroup][0]++;
      loadImg(imgGroup);
    }
    // Load function after page loads
    onload = function() { 
      loadImg('0');
      loadImg('1');
      loadImg('2');
    }
    </script>
    <div style="width:230px;text-align:center;">
    <img name="imgSrc0" id="imgSrc0" src="/images/tabs/sweet1.png">
    </div>
    <div id="headerDivImg">
        <div id="titleTextImg"></div>
        <a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');">
        <img src="/images/tabs/button_open_sweet1.gif"></a>
       </div>
    <div id="contentDivImg" class="sweetlist" style="display: none;">
    <p>BOILED SWEETS - STANDARD</p>
    <input name="id[18]" value="81" id="attrib-18-81" type="radio" onclick="imgPtr[0][0]=12;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
    <input name="id[18]" value="82" id="attrib-18-82" type="radio" onclick="imgPtr[0][0]=13;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
    <input name="id[18]" value="79" id="attrib-18-79" type="radio" onclick="imgPtr[0][0]=10;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
    <input name="id[18]" value="80" id="attrib-18-80" type="radio" onclick="imgPtr[0][0]=11;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />
    <p>BOILED SWEETS - SPECIAL</p>
    <input name="id[18]" value="76" id="attrib-18-76" type="radio" onclick="imgPtr[0][0]=7;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-76"> Fizzy Blueberry</label><br />
    <input name="id[18]" value="61" checked="checked" id="attrib-18-61" type="radio" onclick="imgPtr[0][0]=0;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-61"> Fruits of the Forest</label><br />
    <input name="id[18]" value="74" id="attrib-18-74" type="radio" onclick="imgPtr[0][0]=5;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-74"> Lemon and Lime</label><br />
    <input name="id[18]" value="62" id="attrib-18-62" type="radio" onclick="imgPtr[0][0]=1;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-62"> Pear Drops</label><br />
    <input name="id[18]" value="77" id="attrib-18-77" type="radio" onclick="imgPtr[0][0]=8;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-77"> Sour Cherry</label><br />
    <input name="id[18]" value="73" id="attrib-18-73" type="radio" onclick="imgPtr[0][0]=4;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-73"> Wild Strawberry</label><br /><br />
    <p>GUMMY SWEETS - ORGANIC</p>
    <input name="id[18]" value="85" id="attrib-18-85" type="radio" onclick="imgPtr[0][0]=16;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-85"> Organic Fruit Cocktail</label><br />
    <input name="id[18]" value="86" id="attrib-18-86" type="radio" onclick="imgPtr[0][0]=17;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-86"> Organic Jelly Bears</label><br />
    <input name="id[18]" value="83" id="attrib-18-83" type="radio" onclick="imgPtr[0][0]=14;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-83"> Organic Sour Worms</label><br />
    <input name="id[18]" value="84" id="attrib-18-84" type="radio" onclick="imgPtr[0][0]=15;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-84"> Organic Sugar Bears</label><br />
    </div>
        </td>
        <td align="center" width="33%">
    <div style="width:230px;text-align:center;">
    <img name="imgSrc1" id="imgSrc1" src="/images/tabs/sweet14.png">
    </div>
    <div id="headerDivImg2">
        <div id="titleTextImg2"></div>
        <a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="/images/tabs/button_open_sweet2.gif"></a>
       </div>
    <div id="contentDivImg2" class="sweetlist" style="display: none;">
    <p>BOILED SWEETS - STANDARD</p>
    <input name="id[19]" value="99" id="attrib-19-99" type="radio" onclick="imgPtr[1][0]=12;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
    <input name="id[19]" value="100" id="attrib-19-100" type="radio" onclick="imgPtr[1][0]=13;loadImg('1')" ><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
    <input name="id[19]" value="97" id="attrib-19-97" type="radio" onclick="imgPtr[1][0]=10;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
    <input name="id[19]" value="98" id="attrib-19-98" type="radio" onclick="imgPtr[1][0]=11;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />
    <p>BOILED SWEETS - SPECIAL</p>
    <input name="id[19]" value="94" id="attrib-19-94" type="radio" onclick="imgPtr[1][0]=7;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-94"> Fizzy Blueberry</label><br />
    <input name="id[19]" value="87" checked="checked" id="attrib-19-87" type="radio" onclick="imgPtr[1][0]=0;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-87"> Fruits of the Forest</label><br />
    <input name="id[19]" value="92" id="attrib-19-92" type="radio" onclick="imgPtr[1][0]=5;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-92"> Lemon and Lime</label><br />
    <input name="id[19]" value="88" id="attrib-19-88" type="radio" onclick="imgPtr[1][0]=1;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-88"> Pear Drops</label><br />
    <input name="id[19]" value="95" id="attrib-19-95" type="radio" onclick="imgPtr[1][0]=8;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-95"> Sour Cherry</label><br />
    <input name="id[19]" value="91" id="attrib-19-91" type="radio" onclick="imgPtr[1][0]=4;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-91"> Wild Strawberry</label><br /><br />
    <p>GUMMY SWEETS - ORGANIC</p>
    <input name="id[19]" value="103" id="attrib-19-103" type="radio" onclick="imgPtr[1][0]=16;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-103"> Organic Fruit Cocktail</label><br />
    <input name="id[19]" value="104" id="attrib-19-104" type="radio" onclick="imgPtr[1][0]=17;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-104"> Organic Jelly Bears</label><br />
    <input name="id[19]" value="101" id="attrib-19-101" type="radio" onclick="imgPtr[1][0]=14;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-101"> Organic Sour Worms</label><br />
    <input name="id[19]" value="102" id="attrib-19-102" type="radio" onclick="imgPtr[1][0]=15;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-102"> Organic Sugar Bears</label><br />
    </div>
        </td>
        <td align="center" width="33%">
    <div style="width:230px;text-align:center;">
    <img name="imgSrc2" id="imgSrc2" src="/images/tabs/sweet11.png">
    </div>
    <div id="headerDivImg3">
        <div id="titleTextImg3"></div>
        <a id="imageDivLink3" href="javascript:toggle3('contentDivImg3', 'imageDivLink3');"><img src="/images/tabs/button_open_sweet3.gif"></a>
       </div>
    <div id="contentDivImg3" class="sweetlist" style="display: none;">
    <p>BOILED SWEETS - STANDARD</p>
    <input name="id[20]" value="117" id="attrib-20-117" type="radio" onclick="imgPtr[2][0]=12;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
    <input name="id[20]" value="118" id="attrib-20-118" type="radio" onclick="imgPtr[2][0]=13;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
    <input name="id[20]" value="115" id="attrib-20-115" type="radio" onclick="imgPtr[2][0]=10;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
    <input name="id[20]" value="116" id="attrib-20-116" type="radio" onclick="imgPtr[2][0]=11;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />
    <p>BOILED SWEETS - SPECIAL</p>
    <input name="id[20]" value="112" id="attrib-20-112" type="radio" onclick="imgPtr[2][0]=7loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-112"> Fizzy Blueberry</label><br />
    <input name="id[20]" value="105" checked="checked" id="attrib-20-105" type="radio" onclick="imgPtr[2][0]=0;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-105"> Fruits of the Forest</label><br />
    <input name="id[20]" value="110" id="attrib-20-110" type="radio" onclick="imgPtr[2][0]=5;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-110"> Lemon and Lime</label><br />
    <input name="id[20]" value="106" id="attrib-20-106" type="radio" onclick="imgPtr[2][0]=1;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-106"> Pear Drops</label><br />
    <input name="id[20]" value="113" id="attrib-20-113" type="radio" onclick="imgPtr[2][0]=8;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-113"> Sour Cherry</label><br />
    <input name="id[20]" value="109" id="attrib-20-109" type="radio" onclick="imgPtr[2][0]=4;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-109"> Wild Strawberry</label><br /><br />
    <p>GUMMY SWEETS - ORGANIC</p>
    <input name="id[20]" value="121" id="attrib-20-121" type="radio" onclick="imgPtr[2][0]=16;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-121"> Organic Fruit Cocktail</label><br />
    <input name="id[20]" value="122" id="attrib-20-122" type="radio" onclick="imgPtr[2][0]=17;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-122"> Organic Jelly Bears</label><br />
    <input name="id[20]" value="119" id="attrib-20-119" type="radio" onclick="imgPtr[2][0]=14;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-119"> Organic Sour Worms</label><br />
    <input name="id[20]" value="120" id="attrib-20-120" type="radio" onclick="imgPtr[2][0]=15;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-120"> Organic Sugar Bears</label><br />
    </div>
        </td>
       </tr>
       </table>
       <br class="clearboth" />
      </td>
      </tr>
      </table>
     </div>
    
     <div class="forward Tabdoc_pointer" style="margin-top:20px;margin-right:20px;position:relative;z-index:99;">
      <img src="images/tabs/button_continue.gif" alt="CONTINUE"  onclick="Tabdoc_ManageDisplay(4)">
     </div>
     <div class="back Tabdoc_pointer" style="margin-top:20px;margin-left:20px;position:relative;z-index:99;">
      <img src="images/tabs/button_back.gif" alt="BACK"  onclick="Tabdoc_ManageDisplay(2)">
     </div>
     <div class="clearboth">
      <img src="images/back-sweets.png" alt=" " style="width:970px;margin:-71px 0 0 0;"/>
     </div>
    </div>
    The part I think is the problem is:
    Code:
      var rbtn = 'rg'+imgGroup+ptr;  // alert(rbtn);
      document.getElementById(rbtn).checked = true;
    P.S. Sorry about the mixture of 'divs' and 'tables', i'm still sorting out the styling.
    P.S.S. If you need a visual representation please PM me and I will send you link
    Last edited by 4jd; 10-11-2011 at 01:47 PM. Reason: updated


 

Posting Permissions

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