Checkbox Array in a Form
Checkboxes can be used as arrays and the value can be collected using JavaScript. We will be discussing client side JavaScript and the collection of checkbox value. You can visit the php section for checkbox array handling using PHP server side scripting.
Reading a group of checkbox values in JavaScript function and displaying the selected values
We can create a group of checkbox by giving them the same name and that will create an array and from it we can collect the names of the check boxes for which it is checked.
Here are some commands we will be using to get the details of the events or actions we perform.
document.form1.scripts.length
This gives us the length of the array or the number of elements present in the array. If we know we are using 5 checkboxes then we can directly use the number 5 but it is a good to use this as this picks up all the checkboxes of the group without missing any checkbox. Note that the word scripts in the document.form1.scripts.length is the name of the array and same as the checkboxes name.
document.form1.scripts[i].checked
The above command will return true if the checkbox is checked so we will use one if condition to know it is checked or not. The value of i is the index of the array and as we will be using one for loop so the value of i will be changing upto the maximum value.
DEMO of Checkbox Array script
You can read All Checking & Un checking in a group of checkboxes by single button
The JavaScript code
<script type="text/javascript">
function validate(form) {
// Checking if at least one period button is selected. Or not.
if (!document.form1.sex[0].checked && !document.form1.sex[1].checked){
alert("Please Select Gender");
return false;}
var total=""
for(var i=0; i < document.form1.scripts.length; i++){
if(document.form1.scripts[i].checked)
total +=document.form1.scripts[i].value + "\n"
}
if(total=="")
alert("select scripts")
else
alert (total)
return false;
}</script>To display the period button and checkboxes
<table border='0' width='50%' cellspacing='0' cellpadding='0' >
<form name=form1 method=post action=action_page.php onsubmit='return validate(this)'>
<input type=hidden name=todo value=post>
<tr bgcolor='#ffffff'><td align=center ><font face='verdana' size='2'><b>gender</b>
<input type=radio name=gender value='male'>Male </font>
<input type=radio name=gender value='female'>
<font face='verdana' size='2'>Female</font></td></tr>
<tr><td align=center bgcolor='#f1f1f1'><font face='verdana' size='2'>
<b>Scripts You know</b><input type=checkbox name=scripts value='JavaScript'>JavaScript
<input type=checkbox name=scripts value='PHP'>PHP
<input type=checkbox name=scripts value='HTML'>HTML </td></tr>
<tr bgcolor='#ffffff'><td align=center >
<input type=submit value=Submit> <input type=reset value=Reset></td></tr>
</table></form>
Restricting user selections
We can ask the user to select from a group of checkboxes but we can add one limit to the number of selections by user. User can change the selection but can't exceed the limit.Limiting number of Checkboxes user can select
Receiving data in back end PHP script
We can collect the selected checkbox data along with other components using back end PHP script. The code is available here.Check all with back end PHP script using a form
Validate Checkbox in a form
JavaScript Checkbox Reference
Subscribe to our YouTube Channel here
This article is written by plus2net.com team.
| Nagarjuna | 03-12-2012 |
| (BY USING JAVA SCRIPT)In my application i have one required i,e I have multiple number of check boxes(suppose 10 boxes). when i am going to click a button like lucky dip ,it has to select 6 random check boxes automatically (when i click same button for another time i want to get different 6 values from 10 initial values apart from first values). (I am able to checked 6 boxes(not different values) from 10 check boxes ) could you please give me some suggestions . | |
| yash | 03-05-2013 |
| hii.. i m yash... sorry for first comment... hii i have some problem. plz suggest me the write way to solve my querru.... i have a form .. with multiple checkbox and a search button.... i want when no checkbox is selected then the search button is disappear ... i any one is selected then this search button show... plz send me a code for this... thanx | |