Maximum value of checkboxes

[mazitgirl]

I have a product where I need to allow only a maximum of 6 to be ordered. How can I use Javascript to calculate the total of the checkbox values and limit the number checked?

For example:
there are 6 flavours, I want to allow a pick n mix but only a total of 6. They can order 1 of each flavour or choose a variety of flavours up to a total of 6
example of html (only a snippet as the code is quite long!)- the full code has got values from 1 to 6 for each flavour:
<td height=24 width=71 valign=top bgcolor="#996633">
<p><input type=checkbox name="item-22||0.00| Chocolate||0.00" value="6"><span class="style618"> </span><span class="style620">Qty 6</span></p></td>
<td height=24 width=71 valign=top bgcolor="#ff0000">
<p><input type=checkbox name="item-22||0.00|Strawberry||0.00" value="6"><span class="style618">Qty 6</span></p></td>
<td height=24 width=72 valign=top bgcolor="#ffcc00">
<p><input type=checkbox name="item-22||0.00|Orange||0.00" value="6"> <span class="style618">Qty 6</span></p></td>
<td height=24 width=72 valign=top bgcolor="#99ff99">
<p><input type=checkbox name="item-22||0.00|Spearmint||0.00" value="6"> <span class="style618">Qty 6</span></p></td>
<td height=24 width=73 valign=top bgcolor="#ffff66">
<p><input type=checkbox name="item-22||0.00|Banana||0.00" value="6"> <span class="style618">Qty 6</span></p></td>
<td height=24 width=73 valign=top bgcolor="#ffffff">
<p><input type=checkbox name="item-22||0.00|Tutti Frutti||0.00" value="6"> <span class="style618">Qty 6</span></p></td>

The url is: http://www.aav.uk.com/cgi-bin-local/store/commerce.cgi?page=freeselection.html
so you can see what I'm talking about.
I've searched through this informative forum and found "Controlled Boxes" but although this helps if "all 6" is checked I would like to apply a calculation for the other checkboxes.
I am very new at this.

[Phil Karras]

First, all check boxes must have the same name, in this example
I'm using "cb1", then you can use the following methods:

function CheckTotal(val) {
var DM = document.MyForm1; // The name of my form
var NrCbs = DM.cb1.length; // The # of bc1 checkboxes

var total = 0;
for(i=0; i<NrCbs; ++i) {
if(DM.cb1[i].checked == true) {
++total;
if (total > 6) {
var msg = ""Sorry, we only allow six boxes to be ";
msg += "checked at any one time.";
alert(msg);
DM.cb1[i].checked = false;
}
}
}
}

[mazitgirl]

Thank you for your advice.
The checkbox names have to be as stated in my post because they pass through the form to the shopping cart. It's the value of the checkbox I want to add up and set a maximum value to.
Could this script be modified for that?

[Phil Karras]

The script I gave you was simply to show one way to do what you wanted. Modify it any way you need to.

If you want further help you can contact me directly through my web site.

[mazitgirl]

Thanks Phil. I modified a code called "Order Form" by "Paul DeBrino" and used part of the code you gave above. It works well. Although not 100% of what I want, it is a good quick fix (as time is of the essence!).
The code I used totals up the checked items and alerts if the total goes over the value 6. When a checkbox is 'unchecked' the total descends by the value of the de-selected checkbox.
I'm not that hot at javascript & unfortunately I can't spend hours trying to figure out how to write it at the moment.

[Phil Karras]

Glad to be of help. My version was a little better but still not what I would want.

If you used it in a demo HTML file you would see that it put up an alert-box saying only 6 checks were allowed, then it would uncheck the highest numbered box checked.

I'd prefer that it unchecked the last box checked but I didn't spend time on it either. You should be able to modify it to do just that since I made the function able to pass a piece of information to the function. This info could be the number of the last box just checked and when the total hits > 6 use that number to uncheck the last checked box.

Again, you can contact me directly from my web site if you need more extensive help.

[mazitgirl]

How do I stop the "Add items to cart" from adding the items to the cart if the total is over 6. I've tried: <form action="commerce.cgi" method=post onsubmit="this.form.total.value=CheckChoice(this);">
but it doesn't work!

[Phil Karras]

I believe all you need to do is modify your CheckChoice(this) function to return false when you don't want it added to your cart.

In the function I wrote I'd change it like this:

function CheckTotal(val) {
var DM = document.MyForm1; // The name of my form
var NrCbs = DM.cb1.length; // The # of bc1 checkboxes
var Rtn = true;

var total = 0;
for(i=0; i<NrCbs; ++i) {
if(DM.cb1[i].checked == true) {
++total;
if (total > 6) {
var msg = ""Sorry, we only allow six boxes to be ";
msg += "checked at any one time.";
alert(msg);
DM.cb1[i].checked = false;

Rtn = false;
}
}
}

return Rtn;
}

[mazitgirl]

Sorted! You're a diamond Phil! Thanks so much for your help

[mazitgirl]

I've just noticed when using a different browser to IE, the result in the box is displayed as NaN. This seems to happen when a checkbox is de-selected.
How do I amend it so that it shows that it is a number.

[Phil Karras]

Try dividing by 1 at a place you know the var is supposed to be a number.

EXAMPLE:

Tmp = Tmp/1;

This insures that Tmp is now considered a number & it's a bit easier to remember than the JS method that does the same thing.

[mazitgirl]

Thanks Phil, I'm really lost as to where I should make the change.
Here is the script,

function CheckChoice(whichbox)
{
with (whichbox.form)
{
//Handle differently, depending on type of input box.
if (whichbox.type == "radio")
{
//First, back out the prior radio selection's price from the total:
hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
//Then, save the current radio selection's price:
hiddenpriorradio.value = eval(whichbox.price);
//Now, apply the current radio selection's price to the total:
hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
}
else
{
//If box was checked, accumulate the checkbox value as the form total,
//Otherwise, reduce the form total by the checkbox value:
if (whichbox.checked == false)
{ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
else { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
}

//Ensure the total never goes negative (some browsers allow radiobutton to be deselected):

if (hiddentotal.value > 6)
{
var msg = "Sorry, we only allow six condoms to be ";
msg += "ordered at any one time.";
msg += " Please change your selection";
alert(msg);
whichbox.checked = false;
{ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value);

}


}


//Now, return with formatted total:
return(hiddentotal.value);
}
}



//Define function to init the form on reload:
function InitForm()
{
//Reset the displayed total on form:
document.myform.total.value='0';
document.myform.hiddentotal.value=0;
document.myform.hiddenpriorradio.value=0;
document.myform2.total.value='0';
document.myform2.hiddentotal.value=0;
document.myform2.hiddenpriorradio.value=0;
document.myform2.hiddenpriorradio.value=0;

//Set all checkboxes and radio buttons on form-1 to unchecked:
for (xx=0; xx < document.myform.elements.length; xx++)
{
if (document.myform.elements[xx].type == 'checkbox' | document.myform.elements[xx].type == 'radio')
{
document.myform.elements[xx].checked = false;
}
}
//Set all checkboxes and radio buttons on form-2 to unchecked:
for (xx=0; xx < document.myform2.elements.length; xx++)
{
if (document.myform2.elements[xx].type == 'checkbox' | document.myform2.elements[xx].type == 'radio')
{
document.myform2.elements[xx].checked = false;
}
}

}

// End -->
</script>

[Phil Karras]

Sorry, you'll have to cut out the extras for me. Show me the box that displays NaN. And then point out where it gets its value from.

That's the value that should be div by 1 before displayed.

Once you find that section you may want to put an alert(value) in there so you can see what it is BEFORE you divide by 1. If it starts with alphas then we have a problem, but since this is a browser difference problem we need to see what's going on.

Make it a KISS example if you can, most times doing that will help you locate the problem.

You can also read my debugging articles on
http://www.jsworkshop.com/
or at
http://www.jsworkshop.com/bb/viewforum.php?f=7

KISS - http://www.jsworkshop.com/bb/viewtopic.php?t=508