Page 1 of 1

limiting check boxes with javascript

Posted: Wed Jul 31, 2002 4:34 pm
by fariquzeli
I've looked around trying to find a good script to limit a certain number of check boxes to 3.

I want users only to be able to select 3 radios of the like 20 that I have. If they select more than 3 I want a javascript error to popup, I don't program in javascript and don't have the faintest idea where to start

any suggestions?

Posted: Thu Aug 01, 2002 8:42 am
by volka
do you like this? edit: doesn't seem to work with mozilla (I'm going to install it now, always those IE-only solutions.......)

Code: Select all

<html>
<head>
	<style type="text/css">
		span &#123;border: 1px solid black; &#125;
	</style>
	<script language="JavaScript">
		function check()
		&#123;
			count=0;
			for (i=0; i!=form1.limit.length; i++)
			&#123;
				if (form1.limit&#1111;i].checked == true)
					count++;
			&#125;
			
			for (i=0; i!=form1.limit.length; i++)
			&#123;
				if (count > 2)
				&#123;
					if (form1.limit&#1111;i].checked == false)
						form1.limit&#1111;i].disabled = true;
				&#125;
				else
				&#123;
					if (form1.limit&#1111;i].checked == false)
						form1.limit&#1111;i].disabled = false;
				&#125;
			&#125;
			
			return true;
		&#125;
	</script>
<body>
	<form name="form1" onClick="check();">
		<span>1 <input type="checkbox" name="limit" /></span>
		<span>2 <input type="checkbox" name="limit" /></span>
		<span>3 <input type="checkbox" name="limit" /></span>
		<span>4 <input type="checkbox" name="limit" /></span>
		<span>5 <input type="checkbox" name="limit" /></span>
		<span>6 <input type="checkbox" name="limit" /></span>
	</form>
</body>
</html>
but never trust client-side validation, alway revalidate server-side

Posted: Thu Aug 01, 2002 10:13 am
by fariquzeli
k thanks for the code, I will be submitting this form in an email with php, will I be able to tell which boxes were checked by the user somehow? How will i know which box is checked if they all have the same names?

Posted: Thu Aug 01, 2002 10:22 am
by fariquzeli
NM, I just have to change the values for each checkbox, thanks for the code it works wonderfully!

Posted: Thu Aug 01, 2002 11:13 am
by fariquzeli
wait!

I submitted the form in an email with php and when printing out that variable it only displays one of the 3 checkboxes I have checked, is there a way to display all 3 of the values for the 3 checkboxes together?

Posted: Thu Aug 01, 2002 11:29 am
by RandomEngy
Try renaming "limit" to "limit[]" .

Posted: Thu Aug 01, 2002 11:51 am
by volka
yes, but then you have to alter the script because you can't access a limit[] from javascript (at least not with IE) try this one

Code: Select all

<html>
<head>
	<style type="text/css">
		span &#123;border: 1px solid black; &#125;
	</style>
	<script language="JavaScript">
		function check()
		&#123;
			count=0;
			for (i=0; i!=form1.children.length; i++)
			&#123;
				if (form1.children&#1111;i].tagName.toUpperCase() != "SPAN")
					break;
				else if (form1.children&#1111;i].children&#1111;0].checked == true)
					count++;
			&#125;
			
			while(i!=0)
			&#123;
				i--;
				if (count > 2)
				&#123;
					if (form1.children&#1111;i].children&#1111;0].checked == false)
						form1.children&#1111;i].children&#1111;0].disabled = true;
				&#125;
				else
				&#123;
					if (form1.children&#1111;i].children&#1111;0].checked == false)
						form1.children&#1111;i].children&#1111;0].disabled = false;
				&#125;
			&#125;
			
			return true;
		&#125;
	</script>
<body>
	<?php print('<pre>'); print_r($_POST); print('</pre>');?>
	<form name="form1" method="POST" onClick="check();">
		<span>1 <input type="checkbox" name="limit&#1111;]" value="a" /></span>
		<span>2 <input type="checkbox" name="limit&#1111;]" value="b" /></span>
		<span>3 <input type="checkbox" name="limit&#1111;]" value="c" /></span>
		<span>4 <input type="checkbox" name="limit&#1111;]" value="d" /></span>
		<span>5 <input type="checkbox" name="limit&#1111;]" value="e" /></span>
		<span>6 <input type="checkbox" name="limit&#1111;]" value="f" /></span>
		<input type="submit" />
	</form>
</body>
</html>
the problem with mozilla seems to be that onClick() is not propagated to the input-boxes. Don't know which one is right about this (IE/Mozilla). May be working if you assign the onClick to every single <input type="checkbox"...
edit: this script is not tested at all ;)

Posted: Thu Aug 01, 2002 12:47 pm
by fariquzeli
something is wrong now. With that code there I am able to select as many radios as i want, it doesn't gray the others out after 3 like the other code did, and when i echo out that variable i get "array"

here is the code i'm working with:

Code: Select all

<style type="text/css"> 
      span &#123;border: 1px solid black; &#125; 
   </style> 
 <script language="JavaScript"> 
      function check() 
      &#123; 
         count=0; 
         for (i=0; i!=form1.children.length; i++) 
         &#123; 
            if (form1.children&#1111;i].tagName.toUpperCase() != "SPAN") 
               break; 
            else if (form1.children&#1111;i].children&#1111;0].checked == true) 
               count++; 
         &#125; 
          
         while(i!=0) 
         &#123; 
            i--; 
            if (count > 2) 
            &#123; 
               if (form1.children&#1111;i].children&#1111;0].checked == false) 
                  form1.children&#1111;i].children&#1111;0].disabled = true; 
            &#125; 
            else 
            &#123; 
               if (form1.children&#1111;i].children&#1111;0].checked == false) 
                  form1.children&#1111;i].children&#1111;0].disabled = false; 
            &#125; 
         &#125; 
          
         return true; 
      &#125; 
   </script> 
  <?php print('<pre>'); print_r($_POST); print('</pre>');?> 
      <form name="form1" method="post" action="<?=$PHP_SELF?>">
     <table width="100%" border="0" cellspacing="4" cellpadding="0">
                            <tr> 
                              <td width="4%"><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit&#1111;]" value="Cup Sample">
                                  </font></div></td>
                              <td width="27%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Cup 
                                Sample </font></td>
                              <td width="3%"><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit&#1111;]" value="Classic DPA Sample">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td width="29%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Classic 
                                DPA Sample</font></td>
                              <td width="3%"><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit14" value="L.F. Cup Sample">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td width="34%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">L.F. 
                                Cup Sample</font></td>
                            </tr>
                            <tr> 
                              <td height="20"> <div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit&#1111;]" value="Surg O Vac Sample">
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Surg 
                                O Vac Sample</font></td>
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit&#1111;]" value="2 Tone/Trace Disclosing Sample">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">2 
                                Tone/Trace Disclosing Sample</font></td>
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit13" value="Brush Sample">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Brush 
                                Sample </font></td>
                            </tr>
                            <tr> 
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit&#1111;]" value="Vent O Vac Sample">
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Vent 
                                O Vac Sample</font></td>
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit&#1111;]" value="Jr. Cup Sample">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Jr. 
                                Cup Sample</font></td>
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit12" value="Moisture Control Sample">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Moisture 
                                Control Sample</font></td>
                            </tr>
                            <tr> 
                              <td height="20"> <div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit15" value="Ho Band Sample">
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Ho 
                                Band Sample</font></td>
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit&#1111;]" value="Jr. DPA Sample">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Jr. 
                                DPA Sample</font></td>
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit11" value="D-Lish Contra/Classic Petite DPA">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">D-Lish 
                                Contra/Classic Petite DPA </font></td>
                            </tr>
                            <tr> 
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit16" value="Dri Aid/Slive Dri Aid Sample">
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Dri 
                                Aid/Silver Dri Aid Sample</font></td>
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit&#1111;]" value="Petite DPA Sample">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Petite 
                                DPA Sample</font></td>
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit10" value="D-Lish Contra TP/Classic LF DPA">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">D-Lish 
                                Contra TP/Classic LF DPA</font></td>
                            </tr>
                            <tr> 
                              <td height="14"> <div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit17" value="Contra DPA Sample">
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Contra 
                                DPA Sample</font></td>
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit&#1111;]" value="L.F. DPA Sample">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">L.F. 
                                DPA Sample</font></td>
                              <td><div align="center"> <font size="1"> 
                                  <input name="limit&#1111;]" type="checkbox" id="limit&#1111;]" value="D-Lish Paste">
                                  </font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"> 
                                  </font></div></td>
                              <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif">D-Lish 
                                Paste </font></td>
                            </tr>
<input type="submit">
</form>
one question I also have is what does that one line of php with the <pre> tags do?

anyways, I hope someone knows how to get this worked out. If there is a better way to do this other than checkboxes I'm all ears, i just need something that can limit the choices to 3. Thanks in advance. you guys are the greatest.

Posted: Thu Aug 01, 2002 1:23 pm
by fariquzeli
wait i've figured it out, just had to echo out
limit[0]
limit[1]
limit[2]

to get each individual value. Thanks a bunch for all the helP!

Posted: Thu Sep 05, 2002 7:11 pm
by Stoyanski
use

Code: Select all

print_r($limit);
instead of echo