Solved

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

Posted on 2010-08-16
11
582 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html Table looping 4 25
jquery tab header text 1 23
Can anyone see what is the fault in my javascript code? 8 29
message Alert on an empty search 10 20
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

856 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