JParra72
asked on
Force Selection From Checkbox Option
Hello,
We have a list of check box options that goe like this as part of a web form:
Please select 3 companies:
(checkbox1) Company 1
(checkbox2) Company 2
(checkbox3) Company 3
(checkbox4) Company 4
(checkbox5) Company 5
Here is the sample code
This is what we look to acomplish.
1. The user must select 3 out of the 5 in order to succesfully submit the form.
2. The user should be notified if they do not select any checkbox or if they selected less than 3 when they click on the submit button.
3. If possible, when a user selects 3 checkboxes, the other 2 should grey out.
Thanks! Your help is much appreciated.
We have a list of check box options that goe like this as part of a web form:
Please select 3 companies:
(checkbox1) Company 1
(checkbox2) Company 2
(checkbox3) Company 3
(checkbox4) Company 4
(checkbox5) Company 5
Here is the sample code
<table>
<tr><td align="right">Please select 3 Companies</td></tr>
<tr><td><input name="chkCompany1" type="checkbox" id="chkCompany1" value="Company 1">Company 1</td></tr>
<tr><td><input name="chkCompany2" type="checkbox" id="chkCompany2" value="Company 2">Company 2</td></tr>
<tr><td><input name="chkCompany3" type="checkbox" id="chkCompany3" value="Company 3">Company 3</td></tr>
<tr><td><input name="chkCompany4" type="checkbox" id="chkCompany4" value="Company 4">Company 4</td></tr>
<tr><td><input name="chkCompany5" type="checkbox" id="chkCompany5" value="Company 5">Company 5</td></tr>
</table>
This is what we look to acomplish.
1. The user must select 3 out of the 5 in order to succesfully submit the form.
2. The user should be notified if they do not select any checkbox or if they selected less than 3 when they click on the submit button.
3. If possible, when a user selects 3 checkboxes, the other 2 should grey out.
Thanks! Your help is much appreciated.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Q_28006343.html</title>
</head>
<script>
function countCheckmarks() {
var numCheckedBoxes = 0
for (var i = 1; i<=5 ; i++) {
if (document.getElementById('chkCompany'+i).checked == true ) {
numCheckedBoxes = numCheckedBoxes + 1;
}
}
return numCheckedBoxes;
}
function validate(){
var numCheckedBoxes = countCheckmarks()
if ( numCheckedBoxes == 3 ) {
document.getElementById('myForm').submit();
} else {
alert('You selected ' + numCheckedBoxes + '\nYou need to select 3.');
return false;
}
}
function checkMaxChecked() {
if (countCheckmarks() == 3) {
for (var i = 1; i<=5 ; i++) {
if (document.getElementById('chkCompany'+i).checked == false ) {
document.getElementById('chkCompany'+i).disabled = true;
}
}
} else {
for (var i = 1; i<=5 ; i++) {
document.getElementById('chkCompany'+i).disabled = false;
}
}
}
</script>
<body>
<form name="myForm" id="myForm" method="GET" action="somenewpage.html">
<table>
<tr><td align="right">Please select 3 Companies</td></tr>
<tr><td><input name="chkCompany1" type="checkbox" id="chkCompany1" value="Company 1" onchange="checkMaxChecked();">Company 1</td></tr>
<tr><td><input name="chkCompany2" type="checkbox" id="chkCompany2" value="Company 2" onchange="checkMaxChecked();">Company 2</td></tr>
<tr><td><input name="chkCompany3" type="checkbox" id="chkCompany3" value="Company 3" onchange="checkMaxChecked();">Company 3</td></tr>
<tr><td><input name="chkCompany4" type="checkbox" id="chkCompany4" value="Company 4" onchange="checkMaxChecked();">Company 4</td></tr>
<tr><td><input name="chkCompany5" type="checkbox" id="chkCompany5" value="Company 5" onchange="checkMaxChecked();">Company 5</td></tr>
</table>
<input type="button" value="submit" onclick="validate();"/>
</form>
</body>
</html>
On the server side in PHP, you can make a test if you change the names of the input controls like this. Instead of name="chkCompany1", name="chkCompany2", etc. You can use an array like this: name="chkCompany[1]", name="chkCompany[2]", etc.
You can use var_dump() to print out the contents of $_POST to see the new data structure.
HTH, ~Ray
You can use var_dump() to print out the contents of $_POST to see the new data structure.
HTH, ~Ray
ASKER
Worked like a charm!
ASKER
Hello,
I just noticed it will not work in IE 9 or firefox.
I just noticed it will not work in IE 9 or firefox.
<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById("join_gold_form_c").onsubmit = function() {
var howManyChecked = nbCheckboxChecked();
if(howManyChecked!=3) {
alert("select 3 checkboxes, no more no less!");
return false;
}
return true;
}
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++) if( inputs[i].name && /^chkCompany\d$/.test(inputs[i].name) ) inputs[i].onclick = function() {
if(nbCheckboxChecked()==3) disableCheckboxes(true);
else disableCheckboxes(false);
};
}
function nbCheckboxChecked() {
n = 0;
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++) if( inputs[i].name && /^chkCompany\d$/.test(inputs[i].name) && inputs[i].checked ) n++;
return n;
}
function disableCheckboxes(b) {
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++) if( inputs[i].name && /^chkCompany\d$/.test(inputs[i].name) ) inputs[i].disabled = !inputs[i].checked && b;
}
</script>
Open in new window