...

View Full Version : Checkbox Validation and Limit



4jd
09-19-2011, 09:50 AM
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:



<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

4jd
09-19-2011, 12:48 PM
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.

blaze4218
09-19-2011, 04:24 PM
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:


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.


<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...

blaze4218
09-19-2011, 05:28 PM
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


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...

4jd
09-22-2011, 11:13 AM
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.:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum