...

View Full Version : Only submit if at least one checkbox is checked (dynamically)



freddd
12-22-2005, 02:45 PM
Hi,
Have searched the forum and found a soloution that probably only needs some modification.

I have a number of question with related alternatives in a db that I display on a webpage. I wan't to force the user to select an alternative. I use checkboxes because sometimes more then one answer is correct. I have found a bit of code that lets me do this. The problem is that sometimes the alterative to the question is 3 and sometimes 5 (I don't know beforehand how many alterantives a question has). So is there a way to modify the code to work if there are 3 checkboxes or 5 checkboxes and so on...?

The code below only works with a fixed number of alternatives.


<form action="../" onsubmit="return checkCheckBoxes(this);">
<p><input type="CHECKBOX" name="CHECKBOX_1" value="This..."> This...</p>
<p><input type="CHECKBOX" name="CHECKBOX_2" value="That..."> That...</p>
<p><input type="CHECKBOX" name="CHECKBOX_3" value="...and The Other"> ...and The Other</p>
<p><input type="SUBMIT" value="Submit!"></p>
</form>




<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
if (
theForm.CHECKBOX_1.checked == false &&
theForm.CHECKBOX_2.checked == false &&
theForm.CHECKBOX_3.checked == false)
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
} else {
return true;
}
}
//-->
</script>

mlse
12-22-2005, 03:56 PM
I have limited knowledge of Javascript, but I'm going to try and help anyway! :D

What I would do would be something like:


<form action="../" onsubmit="return checkCheckBoxes("CHECKBOX_", 3);">
<p><input type="CHECKBOX" id="CHECKBOX_1" value="This..."> This...</p>
<p><input type="CHECKBOX" id="CHECKBOX_2" value="That..."> That...</p>
<p><input type="CHECKBOX" id="CHECKBOX_3" value="...and The Other"> ...and The Other</p>
<p><input type="SUBMIT" value="Submit!"></p>
</form>




<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(idstem, count) {
allunchecked = true;
for (i=1, i<=count; i++) {
if (document.getElementbyId(idstem + i).checked == true) {
allunchecked = false;
break;
}
}

if (allunchecked) {
alert ('You didn\'t choose any of the checkboxes!');
return false;
} else {
return true;
}
}
//-->
</script>


I haven't tried it, but I reckon it should work! You just have to change the "3" argument to checkCheckBoxes to however many you have in the HTML.

Hope that helps!

I'm sure there is some fantastic, slick and totally cool way of doing it which one of the Javascript gurus on here could show you ... (I am not one of them!).

Mike.

freddd
12-23-2005, 08:51 AM
Thanks for the response. Unfortunately the code doesn't work. It doesn't give any error messages but it don't force the user to select a checkbox, it don't make any control at all.

degsy
12-23-2005, 11:27 AM
Here is a script that you should be able to adapt to suit



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<script>
function check(){
count = 0;
for(x=0; x<document.form1.checkbox.length; x++){
if(document.form1.checkbox[x].checked==true){
count++
}
}

if(count==0){
alert("You must choose atleast 1");
}
else if(count>3){
alert("You can only choose upto 3");
}
else {
alert("ok")
}
}
</script>
<form name="form1" id="form1" method="post" action="">
<p>
<input type="checkbox" name="checkbox" value="red" />
Red<br />
<input type="checkbox" name="checkbox" value="green" />
Green<br />
<input type="checkbox" name="checkbox" value="blue" />
Blue<br />
<input type="checkbox" name="checkbox" value="black" />
Black<br />
<input type="checkbox" name="checkbox" value="white" />
White<br />
<input type="checkbox" name="checkbox" value="yellow" />
Yellow<br />
<input type="checkbox" name="checkbox" value="purple" />
Purple
</p>
<p>
<input type="button" name="Button" value="Click Me" onclick="check()" />
</p>
</form>
</body>
</html>

freddd
12-23-2005, 01:14 PM
Thanks, it works great!

jeffshead
10-26-2011, 07:50 PM
I realize this post is old but I need something like degsy's code but it needs to work with check boxes that have different names and id's.

Anyone know how?

Philip M
11-03-2011, 08:19 AM
I realize this post is old but I need something like degsy's code but it needs to work with check boxes that have different names and id's.

Anyone know how?

Why? What is wrong with having multiple checkboxes with the same name (not the same id of course)?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum