...

View Full Version : Only allow 25 checkboxes



treeleaf20
12-04-2009, 02:23 PM
All,
I have the following code which validates a form has at least one checkbox checked before it submits it. However I want to make sure that there aren't more then 25 checked on the page. How can I do this?


function validate(field)
{
for (var i = 0; i < field.length; i++){
if(field[i].checked){ // if a field is checked form is submitted
return true;
}
}
alert("You need to have a check box selected to submit the form!");
return false; // if no fields are checked form not submitted
}


Thanks in advance!

jmrker
12-04-2009, 02:43 PM
All,
I have the following code which validates a form has at least one checkbox checked before it submits it. However I want to make sure that there aren't more then 25 checked on the page. How can I do this?


function validate(field)
{
for (var i = 0; i < field.length; i++){
if(field[i].checked){ // if a field is checked form is submitted
return true;
}
}
alert("You need to have a check box selected to submit the form!");
return false; // if no fields are checked form not submitted
}


Thanks in advance!
Try this change:


function validate(field) {
var cbCnt = 0;
for (var i = 0; i < field.length; i++){
if(field[i].checked){ cbCnt++; } // count # increases if a field is checked
}
if (cbCnt < 1) {
alert("You need to have a check box selected to submit the form!");
return false; // if no fields are checked form not submitted
}
if (cbCnt > 25) {
alert("You have TOO MANY check boxes selected to submit the form!");
return false; // if to many fields are checked form not submitted
}
return true; // passes validation of checkbox count
}

strawcakes
12-15-2009, 10:54 PM
Hi, i am using what is above to help me on this as i need the same thing doing, however could you give me an example of the form please.

I have come up with so fare:



<form name="input">
<input type="checkbox" name="cbCnt" value="i">
</form>


is this right?

I am wanting to know were to put cbCnt and were to put i.

And surely you would use if....else if.....else

i.e:


function validate(field) {
var cbCnt = 0;
for (var i = 0; i < field.length; i++){
if(field[i].checked){ cbCnt++; } // count # increases if a field is checked
}
if (cbCnt < 1) {
alert("You need to have a check box selected to submit the form!");
return false; // if no fields are checked form not submitted
}
else if (cbCnt > 25) {
alert("You have TOO MANY check boxes selected to submit the form!");
return false; // if to many fields are checked form not submitted
}
else {
return true; // passes validation of checkbox count
}
}

gusblake
12-15-2009, 11:30 PM
I am wanting to know were to put cbCnt and were to put i.Nowhere - only the JS function uses these.

It gets access to the form via the field argument - a set of HTML elements passed to it when it is called.

It then goes through each one, checking whether it is checked, and if so, incrementing cbCnt. i is simply a counter to keep track of which element is currently being checked.


And surely you would use if....else if.....else1. the two 'if' conditions being checked are mutually exclusive, so the first 'else' is redundant

2. return statements in each 'if' block make sure the last 'else' never gets executed unless the other two conditions aren't met, so it too is redundant

Old Pedant
12-15-2009, 11:39 PM
I think strawcakes was trying to figure out what the <form> and checboxes look like.

Example:

<form name="doesNotMatter" onsubmit="return validate(this.zambonis);">
...
<input type="checkbox" name="zambonis" value="icicles" />
<input type="checkbox" name="zambonis" value="cold" />
<input type="checkbox" name="zambonis" value="hockey" />
<input type="checkbox" name="zambonis" value="snoopy" />
... for as many checkboxes of same name as you want...
<input type="checkbox" name="zambonis" value="zoom" />
...
</form>

So you only have to (a) name the checkboxes the same and (b) pass the entire set of them, by name reference, when you invoke the function.

treeleaf20
12-16-2009, 03:02 AM
My JS looks like this:

function validate(field) {
var cbCnt = 0;
for (var i = 0; i < field.length; i++){
if(field[i].checked){ cbCnt++; } // count # increases if a field is checked
}
if (cbCnt < 1) {
alert("You need to have a picture selected to submit the form!");
return false; // if no fields are checked form not submitted
}
if (cbCnt > 20) {
alert("You can only add 20 pictures at a time!");
return false; // if to many fields are checked form not submitted
}
return true; // passes validation of checkbox count
}


The form with the checkboxes is in a PHP foreach and looks like this:


echo "<input name=\"picbigid[]\" type=\"checkbox\" value=\"$pic[src_big]\">";

Old Pedant
12-16-2009, 06:08 AM
Yeah, but the important thing, then, is the way you invoke the function.

Presumably, something like:


<form name="Whatever" onsubmit="return validate(this.elements['picbigid[]']);">
...

Note that only PHP requires the silly [] on the end of the name of multiple checkboxes. If you are using JSP or ASP or CF, you'd leave off the [] and then you could just do

<form name="Whatever" onsubmit="return validate(this.picbigid);">
...

strawcakes
12-17-2009, 09:45 PM
thanks everyone for there help. however no-one has posted the JS part linked with the form in the body. i am currently struggling how to connect the two. if someone could post this it would be appreciated!

Old Pedant
12-17-2009, 10:22 PM
Yes, I did. In post #5. I quote myself:


<form name="doesNotMatter" onsubmit="return validate(this.zambonis);">
...
<input type="checkbox" name="zambonis" value="icicles" />
<input type="checkbox" name="zambonis" value="cold" />
<input type="checkbox" name="zambonis" value="hockey" />
<input type="checkbox" name="zambonis" value="snoopy" />
... for as many checkboxes of same name as you want...
<input type="checkbox" name="zambonis" value="zoom" />
...
</form>

When the form is submitted (presumbably by way of an <input type=submit> or <input type=image> button) then the onsubmit handler of the <form> is automatically called. And if you put a js function call in there (with return! as shown!) then it works.

Did you not try that?

Or did I misunderstand your problem?

strawcakes
12-17-2009, 10:28 PM
right so what do i out in the js function?

Old Pedant
12-17-2009, 10:37 PM
The code that *you* posted in post #3 should work.

But if you want something different than "you must check between 1 and 25 checkboxes" then you need to tell us so. So far, you haven't told us any differently.

strawcakes
12-24-2009, 12:35 AM
sorry please ignore this

chunzai
12-24-2009, 09:54 AM
Hi,
newbie here.. =)
i think strawcakes asking how to write a complete code here..
if not mistaken it should be..


<html>

<head>

function validate(field) {
var cbCnt = 0;
for (var i = 0; i < field.length; i++){
if(field[i].checked){ cbCnt++; } // count # increases if a field is checked
}
if (cbCnt < 1) {
alert("You need to have a check box selected to submit the form!");
return false; // if no fields are checked form not submitted
}
if (cbCnt > 25) {
alert("You have TOO MANY check boxes selected to submit the form!");
return false; // if to many fields are checked form not submitted
}
return true; // passes validation of checkbox count
}

</head>
<body>

<form name="doesNotMatter" onsubmit="return validate(this.zambonis);">
...
<input type="checkbox" id="zambonis" value="icicles" />
<input type="checkbox" id="zambonis" value="cold" />
<input type="checkbox" id="zambonis" value="hockey" />
<input type="checkbox" id="zambonis" value="snoopy" />
<input type="checkbox" id="zambonis" value="zoom" />
...

<input type = "button" id="subBtn" onclick = "validate('zambonis')" />
</form>
</body>
</html>


i not sure whether it contain of syntax error or not..but i hope it answer you question.. =)
Please do correct me if im wrong..
thanks..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum