[Resolved] retrieve multiple checkbox values with php

andersstudio

Hello,

I am creating a form that needs to validate (with javaScript) that the user has selected at least one checkbox and then pull in the values using php. I then need to display these values in the mailbody and on the confirmation page.

The piece of the html form looks like this:

<input type="checkbox" name="coursesCompleted" value="Calculus I">
Calculus I<br /> <input type="checkbox" name="coursesCompleted" value="Biology 210">
Biology 210<br /> <input type="checkbox" name="coursesCompleted" value="General Chem I">
General Chem I<br /> <input type="checkbox" name="coursesCompleted" value="General Chem II">
General Chem II<br /> <input type="checkbox" name="coursesCompleted" value="Organic I">
Organic I<br /> <input type="checkbox" name="coursesCompleted" value="Organic II">
Organic II<br /> <input type="checkbox" name="coursesCompleted" value="Physics I">
Physics I<br /> <input type="checkbox" name="coursesCompleted" value="Physics II">
Physics II

the javascript validation is as follows and works:

var total = 0;
for (counter = 0; counter < document.health_prof_app.coursesCompleted.length; counter++) {
if (document.health_prof_app.coursesCompleted[counter].checked) {
total += 1;
}
}

if (total < 1){
alert("Please fill in your completed courses.");
return(false);
}

The problem is that only the first letter of the first checked box is displayed with php. The code I am using in the php page is:

$coursesCompleted = $HTTP_POST_VARS['coursesCompleted'];
$courseCount = count($coursesCompleted);
for ($c=0; $c<$courseCount; $c++){
$mailbody.= " $coursesCompleted[$c]" . "\n" ;
}

I have been stuck on this for a long time. Will someone please help me get this right? Thanks!

lucasrd

Checkboxes are passed in an array....try putting brackets in the name attributeo f the checkboxes...

<input type="checkbox" name="coursesCompleted[]" value="Calculus I">
Calculus I<br /> <input type="checkbox" name="coursesCompleted[]" value="Biology 210">
Biology 210<br /> <input type="checkbox" name="coursesCompleted[]" value="General Chem I">
General Chem I<br /> <input type="checkbox" name="coursesCompleted[]" value="General Chem II">
General Chem II<br /> <input type="checkbox" name="coursesCompleted[]" value="Organic I">
Organic I<br /> <input type="checkbox" name="coursesCompleted[]" value="Organic II">
Organic II<br /> <input type="checkbox" name="coursesCompleted[]" value="Physics I">
Physics I<br /> <input type="checkbox" name="coursesCompleted[]" value="Physics II">
Physics II

andersstudio

I appreciate your prompt response, however, I did have those brackets in there, which allows me to pull in all the checked values, however, it does not allow me to use the code that I have to validate that anything was checked because the brackets turn it into an array.?!?!?

bradgrafelman

Why not? This Javascript:

if (document.health_prof_app.coursesCompleted[counter].checked) {

looks to me like it's accessing an array. If it's not (which I don't understand why it's not, but sure...), then use a foreach statement to loop through the array.

Also, what is the purpose of the Javascript? Just to check if the user ticked at least one of the boxes? If so, you could do that with some simple PHP code.

EDIT: Tried it out myself, and alas, you were right - the array breaks the Javascript. I'll attempt to mess with the Javascript, but the server-side PHP check would be simple, too! :p

EDIT2: Alright, got your Javascript working.. add the '[]' brackets to all of the checkboxes names and use this Javascript:

var total = 0;
var elements = document.health_prof_app.elements;
for (counter = 0; counter < elements.length; counter++) { 
if (elements[counter].checked == true && elements[counter].name == "coursesCompleted[]") { 
total += 1; 
} 
} 

if (total < 1){ 
alert("Please fill in your completed courses."); 
return(false); 
}

andersstudio

the following proposed resolution:

var total = 0;
var elements = document.health_prof_app.elements;
for (counter = 0; counter < elements.length; counter++) { 
	if (elements[counter].checked == true && elements[counter].name == "coursesCompleted[]") { 
		total += 1; 
	}
}
if (total < 1){
	alert("Please fill in your completed courses.");
	return(false);
}

Still does not work. I understand the concept here, but unfortunately it never gets into the if statement to add 1 to the total...

lucasrd

Is this a static list, or is it generated from a database? I have an idea...

bradgrafelman

The code I posted works just fine... could you post the HTML code of the form? And also the entire <script></script> section?

EDIT: Here's an example:

<script type="text/javascript">
function validate() {
var total = 0; 
var elements = document.health_prof_app.elements; 
for (counter = 0; counter < elements.length; counter++) { 
if (elements[counter].checked == true && elements[counter].name == "coursesCompleted[]") { 
total += 1; 
} 
} 
if (total < 1){ 
alert("Please fill in your completed courses."); 
return(false); 
}
}
</script>
</head>
<body>
<form action="test.php" method="POST" name="health_prof_app" onSubmit="return validate()">

andersstudio

function form_check (){
// variables that will be used to validate integers
var ssnx = document.health_prof_app.ssn1.value;
var ssny = document.health_prof_app.ssn2.value;
var ssnz = document.health_prof_app.ssn3.value;
var lsuid = document.health_prof_app.lsu_id.value;
var zipx = document.health_prof_app.zip.value;
var gpax = document.health_prof_app.gpa.value;
var birthdatex = document.health_prof_app.birthdate1.value;
var birthdatey = document.health_prof_app.birthdate2.value;
var birthdatez = document.health_prof_app.birthdate3.value;
var school_phonex = document.health_prof_app.school_phone1.value;
var school_phoney = document.health_prof_app.school_phone2.value;
var school_phonez = document.health_prof_app.school_phone3.value;
var home_phonex = document.health_prof_app.home_phone1.value;
var home_phoney = document.health_prof_app.home_phone2.value;
var home_phonez = document.health_prof_app.home_phone3.value;
var year_degree_completedx = document.health_prof_app.year_degree_completed.value;
var date_entered_lsux = document.health_prof_app.date_entered_lsu1.value;
var date_entered_lsuy = document.health_prof_app.date_entered_lsu2.value;
var date_entered_lsuz = document.health_prof_app.date_entered_lsu3.value;
var expect_grad_datex = document.health_prof_app.expect_grad_date1.value;
var expect_grad_datey = document.health_prof_app.expect_grad_date2.value;

// this variable contains elements to test if the input is an integer
var anum = /(^\d+$)|(^\d+\.\d+$)/;

if (document.health_prof_app.name_last_first.value == ""){
	alert ("Please fill in your Name: last, first");
	document.health_prof_app.name_last_first.focus();
	return (false);
}
else if(document.health_prof_app.ssn1.value.length < 3 || !anum.test(ssnx)){  
	alert("Please enter the first 3 valid numbers to your SSN!");
	document.health_prof_app.ssn1.focus();
	document.health_prof_app.ssn1.select();
	return(false);
}
else if(document.health_prof_app.ssn2.value.length < 2 || !anum.test(ssny)){
 	alert ("Please enter the second 2 valid numbers to your SSN!");
 	document.health_prof_app.ssn2.focus();
	document.health_prof_app.ssn2.select();
 	return(false);
}
else if(document.health_prof_app.ssn3.value.length < 4 || !anum.test(ssnz)){ 
 	alert ("Please enter the last 4 valid numbers to your SSN!");
 	document.health_prof_app.ssn3.focus();
	document.health_prof_app.ssn3.select();
 	return(false);
}
else if(document.health_prof_app.lsu_id.value.length < 7 || !anum.test(lsuid)){
	alert ("Please fill in all 7 numbers to your La Salle ID#");
 	document.health_prof_app.lsu_id.focus();
	document.health_prof_app.lsu_id.select();
 	return(false);
}
else if(document.health_prof_app.gpa.value == "" || !anum.test(gpax)){  
	alert ("Please fill in your gpa");
 	document.health_prof_app.gpa.focus();
	document.health_prof_app.gpa.select();
 	return(false);
}
else if(document.health_prof_app.major.value == ""){  
	alert ("Please fill in your major");
 	document.health_prof_app.major.focus();
 	return(false);
}
else if(document.health_prof_app.email.value == ""){  
	alert ("Please fill in your email address");
 	document.health_prof_app.email.focus();
 	return(false);
}
else if(document.health_prof_app.birthdate1.value.length < 1 || !anum.test(birthdatex) || document.health_prof_app.birthdate1.value > 12 || document.health_prof_app.birthdate1.value < 1){
	alert ("Please fill in the month you were born in numerical format");
 	document.health_prof_app.birthdate1.focus();
	document.health_prof_app.birthdate1.select();
 	return(false);
}
else if(document.health_prof_app.birthdate2.value.length < 1 || !anum.test(birthdatey) || document.health_prof_app.birthdate2.value > 31 || document.health_prof_app.birthdate2.value < 0){
	alert ("Please fill in the day you were born");
 	document.health_prof_app.birthdate2.focus();
	document.health_prof_app.birthdate2.select();
 	return(false);
}
else if(document.health_prof_app.birthdate3.value.length < 2 || !anum.test(birthdatez)){
	alert ("Please fill in the year you were born");
 	document.health_prof_app.birthdate3.focus();
	document.health_prof_app.birthdate3.select();
 	return(false);
}
else if(document.health_prof_app.school_addr.value == ""){  
	alert ("Please fill in your school address");
 	document.health_prof_app.school_addr.focus();
	document.health_prof_app.school_addr.select();
 	return(false);
}
else if(document.health_prof_app.school_phone1.value.length < 3 || !anum.test(school_phonex)){
	alert ("Please fill in the area code to your school phone number");
 	document.health_prof_app.school_phone1.focus();
	document.health_prof_app.school_phone1.select();
 	return(false);
}
else if(document.health_prof_app.school_phone2.value.length < 3 || !anum.test(school_phoney)){
	alert ("Please fill in your school phone number");
 	document.health_prof_app.school_phone2.focus();
	document.health_prof_app.school_phone2.select();
 	return(false);
}
else if(document.health_prof_app.school_phone3.value.length < 4 || !anum.test(school_phonez)){
	alert ("Please fill in the last 4 numbers of your school phone number");
 	document.health_prof_app.school_phone3.focus();
	document.health_prof_app.school_phone3.select();
 	return(false);
}
else if(document.health_prof_app.home_address.value == ""){  
	alert ("Please fill in your home address");
 	document.health_prof_app.home_address.focus();
 	return(false);
}
else if(document.health_prof_app.city.value == ""){  
	alert ("Please fill in your city");
 	document.health_prof_app.city.focus();
 	return(false);
}
else if(document.health_prof_app.state.value == ""){  
	alert ("Please fill in your state");
 	document.health_prof_app.state.focus();
 	return(false);
}
else if(document.health_prof_app.zip.value < 5 || !anum.test(zipx)){
	alert ("Please fill in your zip code");
 	document.health_prof_app.zip.focus();
 	return(false);
}
else if(document.health_prof_app.home_phone1.value.length < 3 || !anum.test(home_phonex)){
	alert ("Please fill in the area code of your home phone number");
 	document.health_prof_app.home_phone1.focus();
	document.health_prof_app.home_phone1.select();
 	return(false);
}
else if(document.health_prof_app.home_phone2.value.length < 3 || !anum.test(home_phoney)){
	alert ("Please fill in your home phone number");
 	document.health_prof_app.home_phone2.focus();
	document.health_prof_app.home_phone2.select();
 	return(false);
}
else if(document.health_prof_app.home_phone3.value.length < 4 || !anum.test(home_phonez)){
	alert ("Please fill in the last 4 numbers of your home phone number");
 	document.health_prof_app.home_phone3.focus();
	document.health_prof_app.home_phone3.select();
 	return(false);
}
else if(document.health_prof_app.expect_grad_date1.value.length < 1 || !anum.test(expect_grad_datex) || document.health_prof_app.expect_grad_date1.value > 12 || document.health_prof_app.expect_grad_date1.value < 1){ 
	alert ("Please fill in the month of your expected graduation in numerical format");
 	document.health_prof_app.expect_grad_date1.focus();
	document.health_prof_app.expect_grad_date1.select();
 	return(false);
}
else if(document.health_prof_app.expect_grad_date2.value.length < 4 || !anum.test(expect_grad_datey) || document.health_prof_app.expect_grad_date2.value > 2100 || document.health_prof_app.expect_grad_date2.value < 2005){ 
	alert ("Please fill in the year of your expected graduation");
 	document.health_prof_app.expect_grad_date2.focus();
	document.health_prof_app.expect_grad_date2.select();
 	return(false);
}

// checks to make sure the user filled in his/her completed courses
var total = 0;
var elements = document.health_prof_app.elements;
for (counter = 0; counter < elements.length; counter++) { 
	if (elements[counter].checked == true && elements[counter].name == "coursesCompleted[]") { 
		total += 1; 
	}
}
if (total < 1){
	alert("Please fill in your completed courses.");
	return(false);
}

//email validation
return (emailCheck(document.health_prof_app.email.value));	

//else{
  //	return(true);
//}

}

andersstudio

...............
section of html for completedCourses
<tr align="left" valign="top">
<td align="right" bgcolor="#FFFFFF">Courses completed * </td>
<td bgcolor="#FFFFFF"> <input type="checkbox" name="coursesCompleted" value="Calculus I">
Calculus I<br /> <input type="checkbox" name="coursesCompleted" value="Biology 210">
Biology 210<br /> <input type="checkbox" name="coursesCompleted" value="General Chem I">
General Chem I<br /> <input type="checkbox" name="coursesCompleted" value="General Chem II">
General Chem II<br /> <input type="checkbox" name="coursesCompleted" value="Organic I">
Organic I<br /> <input type="checkbox" name="coursesCompleted" value="Organic II">
Organic II<br /> <input type="checkbox" name="coursesCompleted" value="Physics I">
Physics I<br /> <input type="checkbox" name="coursesCompleted" value="Physics II">
Physics II</td>
</tr>
</body>

bradgrafelman

As I said before, you need to add the '[]' braces to the checkbox names for my code to work, i.e.

<tr align="left" valign="top"> 
<td align="right" bgcolor="#FFFFFF">Courses completed * </td> 
<td bgcolor="#FFFFFF"> <input type="checkbox" name="coursesCompleted[]" value="Calculus I"> 
Calculus I<br /> <input type="checkbox" name="coursesCompleted[]" value="Biology 210"> 
Biology 210<br /> <input type="checkbox" name="coursesCompleted[]" value="General Chem I"> 
General Chem I<br /> <input type="checkbox" name="coursesCompleted[]" value="General Chem II"> 
General Chem II<br /> <input type="checkbox" name="coursesCompleted[]" value="Organic I"> 
Organic I<br /> <input type="checkbox" name="coursesCompleted[]" value="Organic II"> 
Organic II<br /> <input type="checkbox" name="coursesCompleted[]" value="Physics I"> 
Physics I<br /> <input type="checkbox" name="coursesCompleted[]" value="Physics II"> 
Physics II</td> 
</tr> 
</body>

andersstudio

Hey,

I'm sorry, I was working with two different copies and forgot to place those brackets in this one.

I really appreciate your time and patience with my issue.

I'm sure I'll be posting more along the way.

Thanks again.

andersstudio

How do I focus on that element now if it returns false? because it is not the same as document.health_prof_app.completedCourses.focus();

bradgrafelman

Why would you 'focus' on a checkbox?