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 4 of 4
  1. #1
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Help....Need an if statement created

    Hi all

    Okay, I have 3 dropdown options each with its own list of items. Items are selected using radio buttons and on selection provides an image above it of what you have selected.

    What I need is the 'continue' button to be hidden until a selection is made from each of the lists.

    I gave it a try but did not come right, here is some code for what I have already.

    ** Please excuse the use of tables still training myself to use divs consistently.

    Code:
    <div id="Tabdoc_content3" class="Tabdoc_tabdivcontent" style="display:none;background : url(images/back-sweets.png) no-repeat; background-size: 100%;">
     <div class="wrapperAttribsOptions">
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
      <tr valign="top">
      <td width="240px"></td>
      <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">
       <tr valign="top">
        <td align="left" width="230px" style="padding-left:20px;">
    <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/sweetEmpty.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" 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="left" width="230px" style="padding-left:10px;">
    <div style="width:230px;text-align:center;">
    <img name="imgSrc1" id="imgSrc1" src="/images/tabs/sweetEmpty.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" 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="left" width="230px" style="padding-left:10px;">
    <div style="width:230px;text-align:center;">
    <img name="imgSrc2" id="imgSrc2" src="/images/tabs/sweetEmpty.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" 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;">
      <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;">
      <img src="images/tabs/button_back.gif" alt="BACK"  onclick="Tabdoc_ManageDisplay(2)">
     </div>
    </div>
    If anyone can help, I would really appreciate it.
    Thanks in advance

    Jay.

  • #2
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    just realised that if i mark 1 of each as 'checked' it automatically selects 3 options, but only problem I have with that is the image is not being shown.

    Is there someone out there that can help

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    We couldn't make the script work. It's failing at this part:
    Code:
    var rbtn = 'rg'+imgGroup+ptr; 
    document.getElementById(rbtn).checked = true;
    ...basically, there's nothing in your markup that indicates of an element with ID like rg00. Are you hiding other essential markups?
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #4
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    the inputs should be:

    Code:
    <input type="radio" name="rg1" id="rg10" onclick="imgPtr[1][0]=0;loadImg('1')" checked>
     <input type="radio" name="rg1" id="rg11" onclick="imgPtr[1][0]=1;loadImg('1')">
     <input type="radio" name="rg1" id="rg12" onclick="imgPtr[1][0]=2;loadImg('1')">
     <input type="radio" name="rg1" id="rg13" onclick="imgPtr[1][0]=3;loadImg('1')">
     <input type="radio" name="rg1" id="rg14" onclick="imgPtr[1][0]=4;loadImg('1')">
    But my NAME, VALUE and ID are created by Zen-cart specific to that product attribute, Thats why I have this:

    Code:
    <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 />
    Its was a "trial and error" process of just copying the onClick to my inputs and see if it works as I am not a genius when it comes to javascript.

    Is this why its not showing the picture when checked? And if so how would I fix the script to work?

    Thanks for your help and reply

    -------
    Jay
    Last edited by 4jd; 10-05-2011 at 01:16 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
    •