?
Solved

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

Posted on 2010-08-16
11
Medium Priority
?
589 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 83

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 83

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 83

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 83

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 83

Accepted Solution

by:
leakim971 earned 200 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 83

Expert Comment

by:leakim971
ID: 33457829
You're welcome! Thanks for the points!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

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.
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…
Suggested Courses

864 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