Solved

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

Posted on 2010-08-16
11
584 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

738 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