Link to home
Start Free TrialLog in
Avatar of JParra72
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
<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>

Open in new window


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
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
with jQuery : http://jsfiddle.net/AHm9u/2/
$(document).ready(function() {
    $("form").submit(function(evt) {
        if($(":checkbox[name^=chkCompany]").length != 3) {
            evt.preventDefault();
            alert("select 3 checkboxes, no more no less!");
        }
    })
    $(":checkbox[name^=chkCompany]").change(function() {
        $(":checkbox[name^=chkCompany]:not(:checked)").prop("disabled", ($(":checkbox[name^=chkCompany]:checked").length == 3));
    })
})

Open in new window

Avatar of nap0leon
nap0leon

<!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>

Open in new window

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
Avatar of JParra72

ASKER

Worked like a charm!
Hello,

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