|
| |
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. 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 thing. 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. Here is the demo of the script.
You can read All Checking & Un checking in a group of checkboxes by single button
The JavaScript code is kept within the head tag of the page.
<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 Sex");
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 see the code below.
<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>Sex</b><input type=radio name=sex value='male'>Male </font><input type=radio name=sex 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>
| |
| Subscribe |
|
Submit your email address and receive
article and product notifications. Your email is safe with us.
|
|
|
|
