If you’ve created HTML forms then you’ll have used checkboxes and radio buttons for gathering user input. Taking it a step further you would link your form with a server-side scripting language such as PHP to capture the user input and process it. Things get a little tricky when you have groups of checkboxes or radio buttons in your form. Once you create a group of these same control types you form what is known as an array. An array is simply an integer-indexed collection of objects. When defining a checkbox or radio button you need to give it a name. This naming convention allows you to access the value of the control object and use it for whatever purpose you need (store it, email it, etc).
<form action="#"> <input type="checkbox" name="language" value="English" /> I speak English<br /> <input type="checkbox" name="language" value="French" /> I speak French </form>
Above is an example of two checkboxes for choosing a spoken language. Notice how they both share the same name language to create an array (more precisely a nodelist of elements).
<script type="text/javascript" language="JavaScript">
<!--
function showMyChoices1() {
var strChoices = ""
var objCBarray = document.getElementsByName('language');
for (i = 0; i < objCBarray.length; i++) {
if (objCBarray[i].checked) {
strChoices += "* " + objCBarray[i].value + "\n";
}
}
if (strChoices.length > 0) {
var strMessage = "You speak\n" + strChoices;
alert(strMessage);
} else {
alert("Please choose your spoken language(s).");
}}
// -->
</script>
Next I have created a simple function called showMyChoices1 that loops through the checkboxes, creates a message, and displays it using an alert. The variable objCBarray is a handle for the checkbox nodelist acquired by using getElementsByName Document Object Method. Using a for loop to iterate through each checkbox (the loop count is determined by the length property), the checked ones get added to a string called strChoices. After the for loop is finished the length of the string is tested for a value greater than zero. If it tests positive then an alert is shown with the checked values, otherwise a message prompting the user to select a language is shown.
Let’s put it all together (including a button) and see it in action. Try it below.
Here is the code for the JavaScript only version.
<script type="text/javascript" language="JavaScript">
<!--
function showMyChoices1() {
var strChoices = "";
var objCBarray = document.getElementsByName('language');
for (i = 0; i < objCBarray.length; i++) {
if (objCBarray[i].checked) {
strChoices += "* " + objCBarray[i].value + "\n";
}
}
if (strChoices.length > 0) {
var strMessage = "You speak\n" + strChoices;
alert(strMessage);
} else {
alert("Please choose your spoken language(s).");
}
}
// -->
</script>
<form action="#">
<input type="checkbox" name="language" value="English" /> I speak English<br />
<input type="checkbox" name="language" value="French" /> I speak French<br />
<input type="button" value="Show My Choices" onclick="showMyChoices1();" />
</form>
If you plan on using PHP to process your form data then the way the checkboxes were named isn’t going to work. PHP requires you to name the variable in an array manner. It’s basically the same as before but you have to add trailing square brackets []. For example, I used language for the name of my checkboxes. To make this work with PHP I’ll need to use language[]. Having made this change the JavaScript function I’ve created won’t work because of the variable name in getElementsByName (be it with or without the brackets, no bueno). Square brackets in JavaScript have a special meaning so two changes need to be made to my code.
The first change is to add an id to the <form> tag so it can be accessed via getElementById (now I’ll be using this HTML DOM method in place of getElementsByName). The second change is in how I call the getElementById. Notice the notation of how I reference the id of my form and then my checkboxes (BTW, this second function version uses food[] checkboxes). The rest of the function remains the same.
<script type="text/javascript" language="JavaScript">
<!--
function showMyChoices2() {
var strChoices = "";
var objCBarray = document.getElementById('myform')['food[]'];
Try out the PHP + JavaScript version below.
Here is the code for the PHP + JavaScript version.
<script type="text/javascript" language="JavaScript">
<!--
function showMyChoices2() {
var strChoices = "";
var objCBarray = document.getElementById('myform')['food[]'];
for (i = 0; i < objCBarray.length; i++) {
if (objCBarray[i].checked) {
strChoices += "* " + objCBarray[i].value + "\n";
}
}
if (strChoices.length > 0) {
var strMessage = "Your favorite food(s)\n" + strChoices;
alert(strMessage);
} else {
alert("Please choose your favorite foods.");
}
}
// -->
</script>
<form id="myform" action="#">
<p>My favorite food is?</p>
<input type="checkbox" name="food[]" value="Burgers" /> Burgers<br />
<input type="checkbox" name="food[]" value="Pizza" /> Pizza<br />
<input type="checkbox" name="food[]" value="Spaghetti" /> Spaghetti<br />
<input type="checkbox" name="food[]" value="Tamales" /> Tamales<br />
<input type="button" value="Show My Choices" onclick="showMyChoices2();" />
</form>
All that would be left to do is build a PHP script to process the form submission data and set the script’s file name as the action in the <form> tag. That’s beyond the scope of this post, however if you need help doing it, post a comment. Using this code you should now be able to use client-side JavaScript to preprocess form data before it hits the server using standard variable names and PHP array type ones.
Source Code Download: JavaScript PHP Checkbox Array Source Code (Zip)
