[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

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

Expert Comment

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

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

649 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