Checkbox Validation Using ID 1

[DebbieC]

I have 2 sets of checkboxes and I don't want the customer to submit the form unless they have checked at least one checkbox in either set.

I am giving each set of checkboxes the same name because of the code used to send the information through an e-mail.

This is what I have:

<script language="javascript" type="text/javascript">
<!-- 
function checkCheckBoxes() {
if (document.Needs_Assessment.Communication_Skills.checked == false &&
document.Needs_Assessment.Professional_Development.checked == false)
{
alert ('Please select at least one class prior to submitting this survey.');
return false;
}
else
{
return true;
}
}
//-->
</script>


<form method="POST" action="Response.asp" name="FrontPage_Form1" onsubmit="return checkCheckBoxes(this)" action="">


<input type="checkbox" name="Communication_Skills" value="Counseling Improved Performance">Counseling Improved Performance

<input type="checkbox" name="Communication_Skills" value="Choose Your Battles">Choose Your Battles

<input type="checkbox" name="Communication_Skills" value="Documentation and File Building">Documentation and File Building



<input type="checkbox" name="Professional_Development" value="CPR/First Aid">CPR/First Aid

<input type="checkbox" name="Professional_Development" value="Creating Your Career">Creating Your Career

<input type="checkbox" name="Professional_Development" value="How to Build Self-Esteem">How to Build Self-Esteem

I think I have to use unique id's for each checkbox but I don't know how to change the javascript validation code for that.

 

[monksnake]

You pretty much have it, just give each checkbox an id and in your function use the .getElementById() method.

This is very easy, so I don't want to do it for you.

Suppose I give one of your checkboxes an id of cBox1.

I get that object by doing document.getElementById("cBox1")

Since it is a checkbox, I can see if it is checked or not like you did above, with the .checked method.

I know you can get the rest.




<.

 

[DebbieC]

Thanks! That's exactly what I needed was the getElementByID part.

Thanks again.

 

[monksnake]

No problem.

<.

 

[DebbieC]

I tried this but it's not quite working. I actually have 5 checkbox groups. I only put 2 in the original code to simplify my question. I need it to only submit the form if at least one checkbox is checked in ANY group. I want it to return an error message if they don't select ANY checkboxes in ANY group but the code I have is returning the error message if they have selected one - it's requiring two. I had to put each one in the parans just to get it to do that. Otherwise they had to check at least one in each group.

Here it is:

<script language="javascript" type="text/javascript">
<!-- 

function checkCheckBoxes() 

{
if ((document.getElementById("1").checked == false) &&
(document.getElementById("2").checked == false) &&
(document.getElementById("3").checked == false) &&
(document.getElementById("4").checked == false) &&
(document.getElementById("5").checked == false))
	{
	alert ('Please select at least one class prior to submitting this survey.');
	return false;
	}
else
	{
	return true;
	 }
}
//-->
</script>

<input type="checkbox" name="Communication_Skills" id="1" value="Counseling Improved Performance">Counseling Improved Performance

<input type="checkbox" name="Communication_Skills" id="1" value="Choose Your Battles">Choose Your Battles

<input type="checkbox" name="Communication_Skills" id="1" value="Documentation and File Building">Documentation and File Building



<input type="checkbox" name="Professional_Development" id="2" value="CPR/First Aid">CPR/First Aid

<input type="checkbox" name="Professional_Development" id="2" value="Creating Your Career">Creating Your Career

<input type="checkbox" name="Professional_Development" id="2" value="How to Build Self-Esteem">How to Build Self-Esteem


<input type="checkbox" name="Time_Management" id="3" value="Goal Setting">Goal Setting

<input type="checkbox" name="Time_Management" id="3" value="How to Achieve More in Less Time">How to Achieve More in Less Time

....etc

 

[monksnake]

Id's have to be unique, you have multiple HTML elements with the same id.

Since you have multiple checkbox groups, you should probably use the name instead of id. Here I wrote this up for you which will find what is not checked. Based on what group is missing a checked checkbox, it will return the desired message. I did this for 2 of the 5 groups you have, all you have to do is add the other 3 groups to checkCheckboxes. *Tested.

function checkCheckboxGroup(cbName) {
   var checkBoxArray = document.forms['formName'].elements[cbName];
   var checkBoxArrayLength = checkBoxArray.length
   for (a = 0; a < checkBoxArrayLength; a++) {
      if (checkBoxArray[a].checked) {
         return true;
      }
   }
   return false;
}

function checkCheckBoxes() {
   var allGroupsChecked = true;
   allGroupsChecked = checkCheckboxGroup("Communication_Skills");
   if (!allGroupsChecked) {
      alert("Please check at least one box in the Communication Skills area.");
      return false;
   }
   allGroupsChecked = checkCheckboxGroup("Professional_Development");
   if (!allGroupsChecked) {
      alert("Please check at least one box in the Professional Development area.");
      return false;
   }
   return true;
}

<.

 

[DebbieC]

Thanks for your response however I don't want them to be required to check at least one in EACH group, I just need them to check at least one in ANY group. It doesn't look like this code will work for this. Will it?

 

[monksnake]

Are all these checkboxes within a single large div that doesn't contain any other checkboxes or <input> tags??

If so, we can do this check easily.

<.

 

[DebbieC]

No, there isn't a large div with all 5 groups of checkboxes in it. I thought about using one but I'm not real familiar with using them in Javascript. Would this work:

<script language="javascript" type="text/javascript">
<!-- 

function checkCheckBoxes() 

{
if document.getElementById("1").checked == false
	{
	alert ('Please select at least one class prior to submitting this survey.');
	return false;
	}
else
	{
	return true;
	 }
}
//-->
</script>


<Div ID="1">

<input type="checkbox" name="Communication_Skills" value="Counseling Improved Performance">Counseling Improved Performance

<input type="checkbox" name="Communication_Skills" value="Choose Your Battles">Choose Your Battles

<input type="checkbox" name="Communication_Skills" value="Documentation and File Building">Documentation and File Building



<input type="checkbox" name="Professional_Development" value="CPR/First Aid">CPR/First Aid

<input type="checkbox" name="Professional_Development" value="Creating Your Career">Creating Your Career

<input type="checkbox" name="Professional_Development" value="How to Build Self-Esteem">How to Build Self-Esteem


<input type="checkbox" name="Time_Management" value="Goal Setting">Goal Setting

<input type="checkbox" name="Time_Management" value="How to Achieve More in Less Time">How to Achieve More in Less Time

....etc

</Div>

Or do I have to use a Label? I saw that used somewhere too but I didn't know how I would refer to it in the Javascript.

 

[monksnake]

Ok, just got back from lunch. What you show in your example above is perfect. Just one thing, an id with beginning with a number is not a valid id, so you can call it "div1" instead.

Assuming that div is called "div1", you automatically know that ALL <input> tags are checkboxes within "div1".

So, you just loop through each checkbox and see if any at all are checked. This can be done like so in the function checkCheckBoxes:

function checkCheckBoxes() {
   var checkboxArray = document.getElementById("div1").getElementsByTagName("input");
   var checkboxArrayLength = checkboxArray.length;
   for (a = 0; a < checkboxArrayLength; a++) {
      if (checkboxArray[a].checked) {
         return true;
      }
   }
   alert ("Please select at least one class prior to submitting this survey.");
   return false;
}

That should be all you need.  
I use getElementsByTagName to get all the <input> tags that are contained within "div1".

Then I loop through each <input> tag (in this case each checkbox)

If I find one checked, I return true,  if I never returned true, I return false with an alert.

<.