Click to See Complete Forum and Search --> : Check Boxes


rcamp
03-27-2003, 09:22 AM
Written a function that checks if a user has checked more than three boxes on a form(maximum amount). There are 17 check boxes so there is quite alot of code, I want to put this into an array - can anyone help me with this?? See the code below

function countChoices(obj) {
var max = 3; // Max of checkboxes selected

box1 = document.frmHandsetRepair.reason1.checked;
box2 = document.frmHandsetRepair.reason2.checked;
box3 = document.frmHandsetRepair.reason3.checked;
box4 = document.frmHandsetRepair.reason4.checked;
box5 = document.frmHandsetRepair.reason5.checked;
box6 = document.frmHandsetRepair.reason6.checked;
box7 = document.frmHandsetRepair.reason7.checked;
box8 = document.frmHandsetRepair.reason8.checked;
box9 = document.frmHandsetRepair.reason9.checked;
box10 = document.frmHandsetRepair.reason10.checked;
box11 = document.frmHandsetRepair.reason11.checked;
box12 = document.frmHandsetRepair.reason12.checked;
box13 = document.frmHandsetRepair.reason13.checked;
box14 = document.frmHandsetRepair.reason14.checked;
box15 = document.frmHandsetRepair.reason15.checked;
box16 = document.frmHandsetRepair.reason16.checked;
box17 = document.frmHandsetRepair.reason17.checked;


var count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0)
count+= (box4 ? 1 : 0) + (box5 ? 1 : 0) + (box6 ? 1 : 0)
count+= (box7 ? 1 : 0) + (box8 ? 1 : 0) + (box9 ? 1 : 0)
count+= (box10 ? 1 : 0) + (box11 ? 1 : 0) + (box12 ? 1 : 0)
count+= (box13 ? 1 : 0) + (box14 ? 1 : 0) + (box15 ? 1 : 0)
count+= (box16 ? 1 : 0) + (box17 ? 1 : 0);
// If you have more checkboxes on your form
// add more (box_ ? 1 : 0) 's separated by '+'

if (count > max) {
alert("You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
obj.checked = false;
}
}

havik
03-27-2003, 09:32 AM
The field is the name of the checkbox field. If your using obj for it already then just replace it.

Havik


function countChoices(field, obj) {
var checked=0;
var max=3;
var i = 0;

while(checked < max && i < field.length) {

if(field[i].checked = true)
checked++;

i++;

}

if(checked >= max) {
alert("You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
obj.checked = false;

}

rcamp
03-27-2003, 10:11 AM
I need to gather the value of the three checked boxes that the user has selected - is it best to check which boxes have been checked and assign each one to a variable??

Thanks in advance

havik
03-27-2003, 10:18 AM
yes, you can do that by:

var values = new Array();

max=3;
index=0;
i=0;

while(index < max && i < field.length) {

if(field[i].checked = true) {
values[index] = field[i].value;
index++;
}
i++;
}

then your values will be in the values array.

Havik

havik
03-27-2003, 10:20 AM
Oops!

Those if statements need double equal signs, otherwise they'd be read as assignment operators. In case you missed that, I did.

ie. (field[i].checked == true)

Havik

rcamp
03-27-2003, 10:25 AM
I am having a few problems with the solution you posted first :confused: , I have an onclick event on each of the 17 check boxes - onClick="countChoices('reason1',this.value) - am I doing this right ???

Sorry for appearing thick !

havik
03-27-2003, 10:43 AM
I have a similiarly coded function, so the equivalent will be:

onclick="countChoices(this.formname.checkboxname)"

and the equivalent function:

function countChoices(field) {
// the code here
}

so instead of obj try:

if(checked >= max) {
alert("You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
field.checked = false;
}

and just dump obj as an argument altogether

Havik

havik
03-27-2003, 10:55 AM
actually, I just tested the code and it had some problems. I'll look at it and post it soon.

Havik

rcamp
03-27-2003, 11:02 AM
Would appreciate it ! Thank you :)

havik
03-27-2003, 11:04 AM
This should limit the user to only 3 choices

var checked = 0;
var max = 3;
var notfull=true;

function countChoices(field) {

checked++;

if(checked > max) {
alert("You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
notfull=false;
}
return notfull;
}

to receive the values:
- create an array outside the function
- once checked > max, run the function I gave earlier to get the values
- just a notice, the array will continue to receive the values everytime a checkbox is selected when the max is reached. You may choose to leave it this way because it'll work if a reset is selected. But remember to set checked to 0 whenever a reset is hit.

Havik

rcamp
03-28-2003, 04:05 AM
Havik

I have tried this and it appears to work first time round but there seems to be a bug - if I run the following I get the appropriate message but when I try and uncheck the boxes I get the message again even though less than three boxes are checked ???? :confused:

var checked = 0;
var max = 3;
var notfull = true;

function countChoices(field) {

checked++;

if(checked > max)
{
alert("You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
alert(notfull)
notfull=false;
alert(notfull)
}
return notfull;
}
also when I add the following code for the array it doesn't want to work at all !!! :eek:

var values = new Array();

max=3;
index=0;
i=0;

while(index < max && i < field.length) {

if(field[i].checked = true) {
values[index] = field[i].value;
index++;
}
i++;
}

havik
03-28-2003, 09:30 AM
Yeah, I shoulda just looked at your code properly in the first place instead of trying to create another one from scratch. Sorry about that. This'll work now:

function countChoices(field) {
count = 0;
max = 3; // max. number allowed at a time

boxes = new Array();
for(i = 0; i < document.frmHandsetRepair.reasons.length; i++){
boxes[i] = document.frmHandsetRepair.reasons[i].checked;
count += (boxes[i] ? 1 : 0);
}

if (count > max) {
alert("You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
field.checked = false;
}
}

But you need to make the name of all the relevant checkboxes the same. ie:

<input type="checkbox" name="reason1">
<input type="checkbox" name="reason2">
<input type="checkbox" name="reason3">

should all become:

<input type="checkbox" name="reasons">
<input type="checkbox" name="reasons">
<input type="checkbox" name="reasons">

Havik