...

View Full Version : Checkbox form validation - how to make a user select 4 check boxes?



jennypretty
05-11-2007, 05:29 PM
Hello,

I am sorry to keep asking questions. I am newbie in JS.

I have a question of a few checkboxes and how do I require a user to check 2 checkboxes (no more, no less)?

Here is my form:
<input type="checkbox" name="color" id="q" value="a" />A<BR />
<input type="checkbox" name="color" id="q2" value="b" />b<BR />
<input type="checkbox" name="color" id="q3" value="c" />c<BR />
<input type="checkbox" name="color" id="q4" value="d" />d<BR />

Thanks much.

Philip M
05-11-2007, 06:37 PM
function checkBoxes() {
var len = document.formname.color.length // 4 in this case
var count = 0;
for (var i=0; i<len; i++) {
if (color[i].checked) {
count ++;
}
}
if (count !=2) { ..................
}

dasickis
05-11-2007, 07:11 PM
<html>
<head>
<title></title>
<script language="javascript">
function count(){
c=document.getElementById('count');
if(!this.checked) c.innerHTML=parseInt(c.innerHTML)+1; //if we're unchecking the box increase the value of count by 1
else if(c.innerHTML>0) c.innerHTML=parseInt(c.innerHTML)-1; //if we're checking the box and count > 0 then decrease count by 1
else return false; //otherwise if the box is checked and count = 0 then don't let another box get checked
}

function clickd(){
const numboxes = document.skittles.color.length;
for(j=1;j<=numboxes;j++)
document.getElementById('q'+j).onclick=count; //create an onclick event for the checkboxes
}
</script>
</head>

<body>
<p>Please check off <span id="count">2</span> boxes </p> <!--Added this line to let users know how many to check off-->
<form name="skittles">
<input type="checkbox" name="color" id="q1" value="a" />A<BR /> <!--changed id from "q" to "q1"-->
<input type="checkbox" name="color" id="q2" value="b" />b<BR />
<input type="checkbox" name="color" id="q3" value="c" />c<BR />
<input type="checkbox" name="color" id="q4" value="d" />d<BR />
</form>
<script>clickd()</script> <!--Added this to add onclick event to all the checkboxes-->
</body>
</html>

A quick solution, but it indicates to the user how many to check.

jennypretty
05-11-2007, 07:27 PM
When I added this, onClick="clickd()" to all <input> check boxes, nothing happen when I click Submit button.
can you help please?
thanks.

dasickis
05-11-2007, 07:32 PM
You can't do that, clickd() is to add the onclick event to all the checkboxes and it won't work if you do onClick="count()" because then the "this" keyword applies itself to the window. You have to use the clickd function the way it is.

Resource for why this is: http://www.quirksmode.org/js/this.html

dasickis
05-11-2007, 07:35 PM
Can you point me to the page that you're developing, if its on localhost can you send me it or something so I can see it. If you can't show me the full source then can you paste the form in question at least.

jennypretty
05-11-2007, 07:50 PM
I ran on localhost.
here is my code:
Other functions works fine.

<html>
<head>
<title></title>
<script language="javascript">
<!--
var maxC=255;
function limC(obj){
while(obj.value.length>maxC){
obj.value=obj.value.replace(/.$/,'');
}
}

function count(){
c=document.getElementById('count');
if(!this.checked) c.innerHTML=parseInt(c.innerHTML)+1; //if we're unchecking the box increase the value of count by 1
else if(c.innerHTML>0) c.innerHTML=parseInt(c.innerHTML)-1; //if we're checking the box and count > 0 then decrease count by 1
else return false; //otherwise if the box is checked and count = 0 then don't let another box get checked
}

function clickd(){
const numboxes = document.skittles.color.length;
for(j=1;j<=numboxes;j++)
document.getElementById('q'+j).onclick=count; //create an onclick event for the checkboxes
}

function chFrm() {
var msgbox = "You forgot the following question\n";
var goon = msgbox

if (document.frmName.selectname.value==0) {
msgbox = msgbox + "\n Please select one name";
}

// If no errors found, then go ahead to submit the form
if (msgbox == goon) {
return true;
} else {

alert(msgbox);
return false;
}
}
// End -->
</script>
</head>

<body>
<p>Please check off <span id="count">2</span> boxes </p> <!--Added this line to let users know how many to check off-->
<form name="skittles">
<input type="checkbox" name="color" onClick="clickd()" id="q1" value="a" />A<BR /> <!--changed id from "q" to "q1"-->
<input type="checkbox" name="color" onClick="clickd()" id="q2" value="b" />b<BR />
<input type="checkbox" name="color" onClick="clickd()" id="q3" value="c" />c<BR />
<input type="checkbox" name="color" onClick="clickd()" id="q4" value="d" />d<BR />
</form>

</body>
</html>

dasickis
05-11-2007, 09:24 PM
I put what I have on the date format page

glenngv
05-11-2007, 09:29 PM
This will disable the other 2 checkboxes if there are already 2 checkboxes checked.

function clickCtr(chk){
var ctr = 0;
var chks = chk.form.elements[chk.name];
for (var i=0; i<chks.length; i++){
if (chks[i].checked) ctr++;
}
if (ctr==2){
for (i=0; i<chks.length; i++){ //disable remaining unchecked checkboxes
if (!chks[i].checked) chks[i].disabled=true;
}
}
else{ //enable all
for (i=0; i<chks.length; i++){
chks[i].disabled=false;
}
}
}


<form name="skittles">
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q1" value="a" />A<BR />
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q2" value="b" />b<BR />
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q3" value="c" />c<BR />
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q4" value="d" />d<BR />
</form>

jennypretty
05-11-2007, 09:59 PM
That's it.
it worked to stop at 2.
But is there any way to make a user to check at least 2 but not more than 2???
Thanks.

dasickis
05-11-2007, 09:59 PM
That's really well designed

glenngv
05-11-2007, 10:11 PM
function clickCtr(chk){
var ctr = 0;
var chks = chk.form.elements[chk.name];
for (var i=0; i<chks.length; i++){
if (chks[i].checked) ctr++;
}
if (ctr==2){
for (i=0; i<chks.length; i++){ //disable remaining unchecked checkboxes
if (!chks[i].checked) chks[i].disabled=true;
}
}
else{ //enable all
for (i=0; i<chks.length; i++){
chks[i].disabled=false;
}
}
}

function validateForm(frm){
var ctr = 0;
var chks = frm.elements["color"];
for (var i=0; i<chks.length; i++){
if (chks[i].checked) ctr++;
}
if (ctr<2){
alert("Please select two items.");
return false;
}

return true;
}
<form name="skittles" onsubmit="return validateForm(this);">
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q1" value="a" />A<BR />
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q2" value="b" />b<BR />
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q3" value="c" />c<BR />
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q4" value="d" />d<BR />

<input type="submit" value="Submit" />
</form>

jennypretty
05-14-2007, 03:17 PM
When I click submit button, the errors pop up for this particular function ONLY, the rest of them don't validate the form.

Because I have other functions as well.
Is there any way that we can place onBlur directly on checkboxex so that when a user check ONLy 1 box and move to next, a pop up message shows up.

thanks.

My code:

<html>
<head>
<title></title>
<script language="javascript">
<!--
var maxC=255;
function limC(obj){
while(obj.value.length>maxC){
obj.value=obj.value.replace(/.$/,'');
}
}

function count(){
c=document.getElementById('count');
if(!this.checked) c.innerHTML=parseInt(c.innerHTML)+1; //if we're unchecking the box increase the value of count by 1
else if(c.innerHTML>0) c.innerHTML=parseInt(c.innerHTML)-1; //if we're checking the box and count > 0 then decrease count by 1
else return false; //otherwise if the box is checked and count = 0 then don't let another box get checked
}

function clickd(){
const numboxes = document.skittles.color.length;
for(j=1;j<=numboxes;j++)
document.getElementById('q'+j).onclick=count; //create an onclick event for the checkboxes
}

function chFrm() {
var msgbox = "You forgot the following question\n";
var goon = msgbox

if (document.frmName.selectname.value==0) {
msgbox = msgbox + "\n Please select one name";
}
var ctr = 0;
var chks = frm.elements["color"];
for (var i=0; i<chks.length; i++){
if (chks[i].checked) ctr++;
}
if (ctr<2){
alert("Please select two items.");
return false;
}

return true;
}
// If no errors found, then go ahead to submit the form
if (msgbox == goon) {
return true;
} else {

alert(msgbox);
return false;
}
}
// End -->
</script>
</head>

<body>
<p>Please check off <span id="count">2</span> boxes </p> <!--Added this line to let users know how many to check off-->
<form name="skittles">
<input type="checkbox" name="color" onClick="clickd()" id="q1" value="a" />A<BR /> <!--changed id from "q" to "q1"-->
<input type="checkbox" name="color" onClick="clickd()" id="q2" value="b" />b<BR />
<input type="checkbox" name="color" onClick="clickd()" id="q3" value="c" />c<BR />
<input type="checkbox" name="color" onClick="clickd()" id="q4" value="d" />d<BR />
</form>

</body>
</html>

jennypretty
05-14-2007, 04:45 PM
Can I require a user to check at least 2 but No more than 2 boxes? For example. When I added this function on my existing JS function, it does not work.
function check_your_checkboxes() {
var val = $chex.length == 2;
if (!val) {
alert('two checked boxes required');
}
return val;
}

Because I already have this to check for empty field check box.
var checkboxCk = false;
for (i = 0; i < document.frmname.chkFields.length; i++) {
if (document.frmname.chkFields[i].checked)
checkboxCk = true; }
if (!checkboxCk) {
msgbox = msgbox + "\n Question #2, please check on this question";
}

Can you show me how to combine them together?

Thanks.

glenngv
05-14-2007, 08:13 PM
<html>
<head>
<script type="text/javascript">
function clickCtr(chk){
var ctr = 0;
var chks = chk.form.elements[chk.name];
for (var i=0; i<chks.length; i++){
if (chks[i].checked) ctr++;
}
if (ctr==2){
for (i=0; i<chks.length; i++){ //disable remaining unchecked checkboxes
if (!chks[i].checked) chks[i].disabled=true;
}
}
else{ //enable all
for (i=0; i<chks.length; i++){
chks[i].disabled=false;
}
}
}

function validateForm(frm){
var ctr = 0;
var chks = frm.elements["color"];
for (var i=0; i<chks.length; i++){
if (chks[i].checked) ctr++;
}
if (ctr<2){
alert("Please check 2 boxes.");
return false;
}

return true;
}
</script>
</head>
<body>
<form name="skittles" onsubmit="return validateForm(this);">
<p>Please check off 2 boxes </p>
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q1" value="a" />A<br />
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q2" value="b" />b<br />
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q3" value="c" />c<br />
<input type="checkbox" name="color" onClick="clickCtr(this)" id="q4" value="d" />d<br />

<input type="submit" value="Submit" />
</form>
</body>
</html>

jennypretty
05-14-2007, 09:20 PM
It does not affect for validate the if (ctr<2){
alert("Please check 2 boxes.");
return false;
I think because I already have this be the end:
How do I modify this to make it work?

I have about 10 fields to check so I add this by the end so I don't have to repeat it again and again for each field.

return true;
}
// If no errors found, then go ahead to submit the form
if (msgbox == goon) {
return true;
} else {

alert(msgbox);
return false;
}
}
// End -->
</script>

thanks.

glenngv
05-14-2007, 09:35 PM
Post the whole script so that I can see the whole thing.

jennypretty
05-14-2007, 09:48 PM
Here is my code:
thanks.

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
function clickCtr(chk){
var ctr = 0;
var chks = chk.form.elements[chk.name];
for (var i=0; i<chks.length; i++){
if (chks[i].checked) ctr++;
}
if (ctr==2){
for (i=0; i<chks.length; i++){ //disable remaining unchecked checkboxes
if (!chks[i].checked) chks[i].disabled=true;
}
}
else{ //enable all
for (i=0; i<chks.length; i++){
chks[i].disabled=false;
}
}
}

function chFrm() {
var msgbox = "You forgot the following question (s).";
var goon = msgbox

if (document.frmName.Rank.selectedIndex==0) {
msgbox = msgbox + "\n Please select one rank";
}

var CkRadioButton = false;
for (i = 0; i < document.frmName.Gender.length; i++) {
if (document.frmName.Gender[i].checked)
CkRadioButton = true; }
if (!CkRadioButton) {
msgbox = msgbox + "\n Please check your gender";
}

var checkboxCk = false;
for (i = 0; i < document.frmName.country.length; i++) {
if (document.frmName.country[i].checked)
checkboxCk = true; }
if (!checkboxCk) {
msgbox = msgbox + "\n Please check your country";
}

var checkboxCk = false;
for (i = 0; i < document.frmName.Race.length; i++) {
if (document.frmName.Race[i].checked)
checkboxCk = true; }
if (!checkboxCk) {
msgbox = msgbox + "\n Please check your race";
}

var chks = frm.elements["colors"];
for (var i=0; i<chks.length; i++){
if (chks[i].checked) ctr++;
}
if (ctr<2){
alert("Please check 2 boxes.");
return false;
}

// If no errors found, then go ahead to submit the form
if (msgbox == goon) {
return true;
} else {

alert(msgbox);
return false;
}
}
// End -->
</script>

glenngv
05-15-2007, 12:45 AM
You should enclose the codes inside the
][[/COLOR]/code] tags to make them readable.
[CODE]function clickCtr(chk){
var ctr = 0;
var chks = chk.form.elements[chk.name];
for (var i=0; i<chks.length; i++){
if (chks[i].checked) ctr++;
}
if (ctr==2){
for (i=0; i<chks.length; i++){ //disable remaining unchecked checkboxes
if (!chks[i].checked) chks[i].disabled=true;
}
}
else{ //enable all
for (i=0; i<chks.length; i++){
chks[i].disabled=false;
}
}
}

function chFrm() {
var msgbox = "You forgot the following question (s).";
var goon = msgbox

if (document.frmName.Rank.selectedIndex==0) {
msgbox = msgbox + "\n Please select one rank";
}

var CkRadioButton = false;
for (i = 0; i < document.frmName.Gender.length; i++) {
if (document.frmName.Gender[i].checked)
CkRadioButton = true;
}
if (!CkRadioButton) {
msgbox = msgbox + "\n Please check your gender";
}

var checkboxCk = false;
for (i = 0; i < document.frmName.country.length; i++) {
if (document.frmName.country[i].checked)
checkboxCk = true;
}
if (!checkboxCk) {
msgbox = msgbox + "\n Please check your country";
}

var checkboxCk = false;
for (i = 0; i < document.frmName.Race.length; i++) {
if (document.frmName.Race[i].checked)
checkboxCk = true;
}
if (!checkboxCk) {
msgbox = msgbox + "\n Please check your race";
}

var chks = document.frmName.elements["colors"];
for (var i=0; i<chks.length; i++){
if (chks[i].checked) ctr++;
}
if (ctr<2){
msgbox = msgbox + "\n Please check 2 boxes.";
}

// If no errors found, then go ahead to submit the form
if (msgbox == goon) {
return true;
} else {
alert(msgbox);
return false;
}
}
If you call chFrm() on form onsubmit, you can pass this as parameter as I did in your other post (http://www.codingforums.com/showthread.php?t=113915#post565207). That way, you don't have to use document.frmName repeatedly.

jennypretty
05-15-2007, 02:53 PM
Perfect. It worked.
Big thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum