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

    Checkbox Validation and Limit

    Hi All

    I am not a genius when it comes to javascript so if anyone could help, I would really be grateful.

    scenario:

    I am creating a custom product (75g) which will be made up of 3 others products (25g + 25g + 25g). The 3 options will be made up of a combination of smaller products each with their own options (25g, 50g, 75g) which will allow the customer to have one of each or fill up all 3 with just one type.

    Here is what I have in code already:

    Code:
    <div class="wrapperAttribsOptions">
    <h4 class="optionName back">Organic Sour Worms</h4>
    <div class="back">
    <input name="id[14][48]" value="48" id="attrib-14-48" type="checkbox"><label class="attribsCheckbox" for="attrib-14-48">25g</label><br>
    <input name="id[14][49]" value="49" id="attrib-14-49" type="checkbox"><label class="attribsCheckbox" for="attrib-14-49">50g</label><br>
    <input name="id[14][50]" value="50" id="attrib-14-50" type="checkbox"><label class="attribsCheckbox" for="attrib-14-50">75g</label><br>
    </div>
    <br class="clearBoth">
    </div>
    
    <br class="clearBoth">
    
    <div class="wrapperAttribsOptions">
    <h4 class="optionName back">Organic Sugar Bears</h4>
    <div class="back">
    <input name="id[15][51]" value="51" id="attrib-15-51" type="checkbox"><label class="attribsCheckbox" for="attrib-15-51">25g</label><br>
    <input name="id[15][52]" value="52" id="attrib-15-52" type="checkbox"><label class="attribsCheckbox" for="attrib-15-52">50g</label><br>
    <input name="id[15][53]" value="53" id="attrib-15-53" type="checkbox"><label class="attribsCheckbox" for="attrib-15-53">75g</label><br>
    </div>
    <br class="clearBoth">
    </div>
    
    <br class="clearBoth">
    
    <div class="wrapperAttribsOptions">
    <h4 class="optionName back">Organic Fruit Cocktail</h4>
    <div class="back">
    <input name="id[16][54]" value="54" id="attrib-16-54" type="checkbox"><label class="attribsCheckbox" for="attrib-16-54">25g</label><br>
    <input name="id[16][55]" value="55" id="attrib-16-55" type="checkbox"><label class="attribsCheckbox" for="attrib-16-55">50g</label><br>
    <input name="id[16][59]" value="59" id="attrib-16-59" type="checkbox"><label class="attribsCheckbox" for="attrib-16-59">75g</label><br>
    </div>
    <br class="clearBoth">
    </div>
    
    <br class="clearBoth">
    
    <div class="wrapperAttribsOptions">
    <h4 class="optionName back">Organic Jelly Bears</h4>
    <div class="back">
    <input name="id[17][57]" value="57" id="attrib-17-57" type="checkbox"><label class="attribsCheckbox" for="attrib-17-57">25g</label><br>
    <input name="id[17][58]" value="58" id="attrib-17-58" type="checkbox"><label class="attribsCheckbox" for="attrib-17-58">50g</label><br>
    <input name="id[17][60]" value="60" id="attrib-17-60" type="checkbox"><label class="attribsCheckbox" for="attrib-17-60">75g</label><br>
    </div>
    <br class="clearBoth">
    </div>
    What I need to do is to some how ensure that the product is filled with 75g worth of the other products.
    Another option may to not use the 'grams' but rather use the 3 compartments that will be filled so 25g = 1, 50g = 2, 75g = 3 etc.

    Note: Name, Values, Ids are made dynamically by the cart, and I cannot change those as they are used for adding to cart and updating account info etc.

    PLEASE PLEASE PLEASE if anyone can help, I would really appreciate it.

    -----------------------------
    Jay

  • #2
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Let me ask in another way...

    Referring to the above code.

    Like I said I am not great in javascript but have used and altered loads before, so...

    I need to collect code written for this (how it is in my brain)

    Values...
    48, 51, 54, 57 must = 1
    49, 52, 55, 58 must = 2
    50, 53, 55, 59 must = 3

    If i'm guessing, create a variable for each and set as an integer.

    At the end I have a 'continue' button which will need to validate the users selections, add up the numbers, if they are NOT equal to 3 then alert and do not continue, but if it is then continue to next screen.

    I hope this makes sense.

    Please let me now if you need anymore info.

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    If I understand the question: you need to loop through all of the checkboxes, see if they're checked; if they are: add either 1,2, or 3 to your valid-sum variable.

    Might I suggest the following:
    Code:
    function CHECK_INPUTS(){
     validQTY = 0;
     var doc = document.getElementsByTagName('input'); // This works on element tags like 'p', it should work on 'input'
     for (var i = 0; i < doc.length; i++){
      if(doc[i].checked){
       if(doc[i].value == 48 || doc[i].value == 51 || doc[i].value == 54 || doc[i].value == 57 ){ // Sorry, I don't know how to shorthand this...
        validQTY +=1;
        }
       if(doc[i].value == 49 || doc[i].value == 52 || doc[i].value == 55 || doc[i].value == 58 ){
        validQTY +=2;
        }
       if(doc[i].value == 50 || doc[i].value == 53 || doc[i].value == 56 || doc[i].value == 59 ){ // I took the liberty of *fixing* the 3rd value here, I think you made a typo
        validQTY +=3;
        }
       }
      }
     }
    anyway, I tested it against the HTML you provided using the following button/div combo and it worked.
    Code:
    <button onclick="CHECK_INPUTS();getElementById('tester').innerHTML=validQTY;">TEST</button>
    <div id="tester"></div>
    all you need to do is replace the getElementById('tester').innerHTML=validQTY; with your submit function (i didn't see a form in your HTML...) good luck

    // EDIT
    I just notice that your last input has a value of 60, but since you didn't include that in the parameters for your question I didn't check for it in my solution, so that one checkbox won't work right...
    Last edited by blaze4218; 09-19-2011 at 05:33 PM.

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    I just reread your post, and realized I left out the validating of the quantity. I guess that just seemed implied to me, but in case you haven't already figured out
    Code:
    function CHECK_INPUTS(){
     validQTY = 0;
     var doc = document.getElementsByTagName('input'); // This works on element tags like 'p', it should work on 'input'
     for (var i = 0; i < doc.length; i++){
      if(doc[i].checked){
       if(doc[i].value == 48 || doc[i].value == 51 || doc[i].value == 54 || doc[i].value == 57 ){ // Sorry, I don't know how to shorthand this...
        validQTY +=1;
        }
       if(doc[i].value == 49 || doc[i].value == 52 || doc[i].value == 55 || doc[i].value == 58 ){
        validQTY +=2;
        }
       if(doc[i].value == 50 || doc[i].value == 53 || doc[i].value == 56 || doc[i].value == 59 ){ // I took the liberty of *fixing* the 3rd value here, I think you made a typo
        validQTY +=3;
        }
       }
      }
     if(validQTY != 3)return false;  // Added this line
     }
    Sorry about that...

  • Users who have thanked blaze4218 for this post:

    4jd (09-22-2011)

  • #5
    4jd
    4jd is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks for that, I have since changed my options. Instead of using masses of selectors with 3 of the same options I have changed it 3 selectors with masses of options which looks neater and much easier to make sense of it.

    I manage to figure it out, but thanks a stack for your input, really appreciate it.

    Jay.


  •  

    Posting Permissions

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