Solved

Force Selection From Checkbox Option

Posted on 2013-01-23
6
390 Views
Last Modified: 2013-01-30
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.
0
Comment
Question by:JParra72
6 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38812098
test page : http://jsfiddle.net/AHm9u/
window.onload = function() {

    document.getElementById("myform").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;
}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38812134
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

0
 
LVL 18

Expert Comment

by:nap0leon
ID: 38812157
<!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

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38813032
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
0
 

Author Closing Comment

by:JParra72
ID: 38827525
Worked like a charm!
0
 

Author Comment

by:JParra72
ID: 38837441
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

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now