Solved

How do I limit checkbox count when there's an array

Posted on 2010-08-16
11
579 Views
Last Modified: 2012-05-10
I've got 40 checkboxes, I need to make it so the user can only select 5, this works no problem if there's no array being used, but i need the [] to process my php function
The form: 

<form action="<?=$PHP_SELF?>" method="post" name="form" id="form">
		<input type=checkbox name="cuisine[]" value="Steak & Seafood>Steak & Seafood<br />
		<input type=checkbox name="cuisine[]" value="Sushi">Sushi<br />
		<input type=checkbox name="cuisine[]" value="Tapas>Tapas<br />
		<input type=checkbox name="cuisine[]" value="Thai">Thai<br />
		<input type=checkbox name="cuisine[]" value="Vegetarian">Vegetarian<br />
		<input type=checkbox name="cuisine[]" value="Vietnamese">Vietnamese<br />
		<input type=checkbox name="cuisine[]" value="Wine Bar">Wine Bar<br />
		<input type=checkbox name="cuisine[]" value="Winery">Winery<br />
		<input type=checkbox name="cuisine[]" value="Wings">Wings
</form>

javascript under form:

<script type="text/javascript">
//Syntax: checkboxlimit(checkbox_reference, limit)
checkboxlimit(document.forms.form.cuisine[], 5)
</script>

javascript in header:

<script type="text/javascript">
function checkboxlimit(checkgroup, limit){
	var checkgroup=checkgroup
	var limit=limit
	for (var i=0; i<checkgroup.length; i++){
		checkgroup[i].onclick=function(){
		var checkedcount=0
		for (var i=0; i<checkgroup.length; i++)
			checkedcount+=(checkgroup[i].checked)? 1 : 0
		if (checkedcount>limit){
			alert("You can only select a maximum of "+limit+" checkboxes")
			this.checked=false
			}
		}
	}
}
</script>

Open in new window

0
Comment
Question by:transitnetwork
  • 6
  • 4
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33450482
Pass only the name of the checkgroup as string and use : document.getElementsByName

test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
	function checkboxlimit(checkgroup, limit){
		var checkgroup = document.getElementsByName(checkgroup);
		var limit=limit
		for (var i=0; i<checkgroup.length; i++){
			checkgroup[i].onclick=function(){
			var checkedcount=0
			for (var i=0; i<checkgroup.length; i++)
				checkedcount+=(checkgroup[i].checked)? 1 : 0
				if (checkedcount>limit){
					alert("You can only select a maximum of "+limit+" checkboxes")
					this.checked=false
				}
			}
		}
	}
</script>
</head>
<body onload="checkboxlimit('cuisine[]', 5)">
<form action="<?=$PHP_SELF?>" method="post" name="form" id="form">
        <input type="checkbox" name="cuisine[]" value="Steak & Seafood">Steak & Seafood<br />
        <input type="checkbox" name="cuisine[]" value="Sushi">Sushi<br />
        <input type="checkbox" name="cuisine[]" value="Tapas">Tapas<br />
        <input type="checkbox" name="cuisine[]" value="Thai">Thai<br />
        <input type="checkbox" name="cuisine[]" value="Vegetarian">Vegetarian<br />
        <input type="checkbox" name="cuisine[]" value="Vietnamese">Vietnamese<br />
        <input type="checkbox" name="cuisine[]" value="Wine Bar">Wine Bar<br />
        <input type="checkbox" name="cuisine[]" value="Winery">Winery<br />
        <input type="checkbox" name="cuisine[]" value="Wings">Wings
</form>
</body>
</html>

Open in new window

0
 
LVL 58

Expert Comment

by:cyberkiwi
ID: 33450551

<html>

<head>

<script type="text/javascript">

function checkboxlimit(theform, incheckgroup, limit){

alert (incheckgroup);

	var inputs = theform.getElementsByTagName('input');

	var checkgroup = [];

	//var limit=limit

	for (var i=0; i<inputs.length; i++){

	alert(inputs[i].getAttribute("name"));

		if(inputs[i].getAttribute("name")==incheckgroup+'[]') {

			checkgroup.push(inputs[i]);

		}}

	for (var i=0; i<checkgroup.length; i++){

		checkgroup[i].onclick=function(){

		var checkedcount=0

		for (var i=0; i<checkgroup.length; i++)

			checkedcount+=(checkgroup[i].checked)? 1 : 0

		if (checkedcount>limit){

			alert("You can only select a maximum of "+limit+" checkboxes")

			this.checked=false

			}

		}

	}

}

</script>

</head>

<body>

<form action="<?=$PHP_SELF?>" method="post" name="form" id="form">

		<input type="checkbox" name="cuisine[]" value="Steak & Seafood">Steak & Seafood<br />

		<input type="checkbox" name="cuisine[]" value="Sushi">Sushi<br />

		<input type="checkbox" name="cuisine[]" value="Tapas">Tapas<br />

		<input type="checkbox" name="cuisine[]" value="Thai">Thai<br />

		<input type="checkbox" name="cuisine[]" value="Vegetarian">Vegetarian<br />

		<input type="checkbox" name="cuisine[]" value="Vietnamese">Vietnamese<br />

		<input type="checkbox" name="cuisine[]" value="Wine Bar">Wine Bar<br />

		<input type="checkbox" name="cuisine[]" value="Winery">Winery<br />

		<input type="checkbox" name="cuisine[]" value="Wings">Wings

</form>



<script type="text/javascript">

//Syntax: checkboxlimit(checkbox_reference, limit)

checkboxlimit(document.forms.form, "cuisine", 5)

</script>



</body>

</html>

Open in new window

0
 

Author Comment

by:transitnetwork
ID: 33457187
I'm afraid neither of these are working
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33457258
without any modification from you ?
0
 

Author Comment

by:transitnetwork
ID: 33457355
it works in ie but not in chrome, but if i put cyberwiki's solution into it's own page, it works in chrome... makes no sense to me

http://www.markhameats.com/addrestaurant.php
0
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.

 
LVL 82

Expert Comment

by:leakim971
ID: 33457562
neither of these are working

mine work on ie and chrome...
0
 

Author Comment

by:transitnetwork
ID: 33457576
is it possible to not have the onload with your solution?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33457601
of course, just remove it.

I put it to replace your inline code.
<body>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 50 total points
ID: 33457629

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
	function checkboxlimit(checkgroup, limit){
		var checkgroup = document.getElementsByName(checkgroup);
		var limit=limit
		for (var i=0; i<checkgroup.length; i++){
			checkgroup[i].onclick=function(){
			var checkedcount=0
			for (var i=0; i<checkgroup.length; i++)
				checkedcount+=(checkgroup[i].checked)? 1 : 0
				if (checkedcount>limit){
					alert("You can only select a maximum of "+limit+" checkboxes")
					this.checked=false
				}
			}
		}
	}
</script>
</head>
<body>
<form action="<?=$PHP_SELF?>" method="post" name="form" id="form">
        <input type="checkbox" name="cuisine[]" value="Steak & Seafood">Steak & Seafood<br />
        <input type="checkbox" name="cuisine[]" value="Sushi">Sushi<br />
        <input type="checkbox" name="cuisine[]" value="Tapas">Tapas<br />
        <input type="checkbox" name="cuisine[]" value="Thai">Thai<br />
        <input type="checkbox" name="cuisine[]" value="Vegetarian">Vegetarian<br />
        <input type="checkbox" name="cuisine[]" value="Vietnamese">Vietnamese<br />
        <input type="checkbox" name="cuisine[]" value="Wine Bar">Wine Bar<br />
        <input type="checkbox" name="cuisine[]" value="Winery">Winery<br />
        <input type="checkbox" name="cuisine[]" value="Wings">Wings
</form>
<script language="javascript">
checkboxlimit('cuisine[]', 5);
</script>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:transitnetwork
ID: 33457635
Epic, thanks!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33457829
You're welcome! Thanks for the points!
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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

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

12 Experts available now in Live!

Get 1:1 Help Now