|
|
Limiting the number of checkboxes selected by userMany time inside our form we want a rule or limit where uses are not allowed to select more than a number of checkbox to give their choice. For example we are asked to select three areas of web programming where we are the best. Total eight choices are given to us, out of which only three ( maximum ) are to be selected. Here the user can go for three selection and once he / she goes for fourth selection the JavaScript function script should show him a error alert message saying maximum 3 are allowed and the fourth selected ( or checked ) should be automatically unchecked after the message.
You can read the checkbox details like its status and how to handle array of checkbox here .
We have used onclick event of checkbox to trigger the function which checks the number of checkbox clicked. Here once the fourth one is clicked by the user the function shows a message and after that it removes or uncheck the last checkbox ( the fourth one ) the user has clicked. So on every click of the checkbox we will pass the serial number of the checkbox to the function to tell which one is the last one clicked. This line below inside the function uses that and unchecks that particular checkbox.
document.form1.ckb[j].checked = false ;
Here j carries the serial number of the checkbox which was last clicked.
Here is the demo
Here is the complete code.
<html>
<head>
<title></title>
<META NAME="DESCRIPTION" CONTENT="">
<META NAME="KEYWORDS" CONTENT="">
<script type="text/javascript">
function chkcontrol(j) {
var total=0;
for(var i=0; i < document.form1.ckb.length; i++){
if(document.form1.ckb[i].checked){
total =total +1;}
if(total > 3){
alert("Please Select only three")
document.form1.ckb[j].checked = false ;
return false;
}
}
} </script>
</head>
<body topmargin=''0''; >
<form name=form1 method=post action=check.php>
<table border=''0'' width=''250'' cellspacing=''0'' cellpadding=''0'' align=center>
<tr bgcolor=''#ffffcc''><td > </td><td ><b>Choice</b></td></tr>
<tr bgcolor=''#f1f1f1'' ><td ><input type=checkbox name=ckb value=1 onclick=''chkcontrol(0)'';></td><td >PHP</td></tr>
<tr bgcolor=''#ffffff'' ><td ><input type=checkbox name=ckb value=2 onclick=''chkcontrol(1)'';></td><td >Perl</td></tr>
<tr bgcolor=''#f1f1f1'' ><td ><input type=checkbox name=ckb value=3 onclick=''chkcontrol(2)'';></td><td >MySQL</td></tr>
<tr bgcolor=''#ffffff'' ><td ><input type=checkbox name=ckb value=4 onclick=''chkcontrol(3)'';></td><td >ASP</td></tr>
<tr bgcolor=''#f1f1f1'' ><td ><input type=checkbox name=ckb value=5 onclick=''chkcontrol(4)'';></td><td >JavaScript</td></tr>
<tr bgcolor=''#ffffff'' ><td ><input type=checkbox name=ckb value=6 onclick=''chkcontrol(5)'';></td><td >CSS</td></tr>
<tr bgcolor=''#f1f1f1'' ><td ><input type=checkbox name=ckb value=7 onclick=''chkcontrol(6)'';></td><td >HTML</td></tr>
<tr bgcolor=''#ffffff'' ><td ><input type=checkbox name=ckb value=8 onclick=''chkcontrol(7)'';></td><td >Photo Shop</td></tr>
</table></form>
</body>
</html>
| |
| | | KDR | 22-12-2010 |
|---|
| Do note that the "serial number" (variable n) you assign in the form needs to be sequential in the order the page gets rendered. I.e. when you read your lines of code from the top down, the variable n you assign to each checkbox should be sequential. This only comes into play if you have your checkboxes in a table with more than one column. Your displayed data might go down one column and then down the next, your variable n needs to go left to right, row by row. | | semky | 04-05-2011 |
|---|
| All your check boxes have the same name. when So when php inserts form values into mysql, I need each box to have a separate name. but only 3 can be checked, I am inserting 9 check boxes. check is not like radio with same name. |
|
|
|
|
|
|
