limiting check boxes with javascript
Moderator: General Moderators
-
fariquzeli
- Forum Contributor
- Posts: 144
- Joined: Mon Jun 24, 2002 9:16 am
- Location: Chicago
- Contact:
limiting check boxes with javascript
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?
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?
do you like this? edit: doesn't seem to work with mozilla (I'm going to install it now, always those IE-only solutions.......)but never trust client-side validation, alway revalidate server-side
Code: Select all
<html>
<head>
<style type="text/css">
span {border: 1px solid black; }
</style>
<script language="JavaScript">
function check()
{
count=0;
for (i=0; i!=form1.limit.length; i++)
{
if (form1.limitїi].checked == true)
count++;
}
for (i=0; i!=form1.limit.length; i++)
{
if (count > 2)
{
if (form1.limitїi].checked == false)
form1.limitїi].disabled = true;
}
else
{
if (form1.limitїi].checked == false)
form1.limitїi].disabled = false;
}
}
return true;
}
</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>-
fariquzeli
- Forum Contributor
- Posts: 144
- Joined: Mon Jun 24, 2002 9:16 am
- Location: Chicago
- Contact:
-
fariquzeli
- Forum Contributor
- Posts: 144
- Joined: Mon Jun 24, 2002 9:16 am
- Location: Chicago
- Contact:
-
fariquzeli
- Forum Contributor
- Posts: 144
- Joined: Mon Jun 24, 2002 9:16 am
- Location: Chicago
- Contact:
- RandomEngy
- Forum Contributor
- Posts: 173
- Joined: Wed Jun 26, 2002 3:24 pm
- Contact:
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 onethe 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
Code: Select all
<html>
<head>
<style type="text/css">
span {border: 1px solid black; }
</style>
<script language="JavaScript">
function check()
{
count=0;
for (i=0; i!=form1.children.length; i++)
{
if (form1.childrenїi].tagName.toUpperCase() != "SPAN")
break;
else if (form1.childrenїi].childrenї0].checked == true)
count++;
}
while(i!=0)
{
i--;
if (count > 2)
{
if (form1.childrenїi].childrenї0].checked == false)
form1.childrenїi].childrenї0].disabled = true;
}
else
{
if (form1.childrenїi].childrenї0].checked == false)
form1.childrenїi].childrenї0].disabled = false;
}
}
return true;
}
</script>
<body>
<?php print('<pre>'); print_r($_POST); print('</pre>');?>
<form name="form1" method="POST" onClick="check();">
<span>1 <input type="checkbox" name="limitї]" value="a" /></span>
<span>2 <input type="checkbox" name="limitї]" value="b" /></span>
<span>3 <input type="checkbox" name="limitї]" value="c" /></span>
<span>4 <input type="checkbox" name="limitї]" value="d" /></span>
<span>5 <input type="checkbox" name="limitї]" value="e" /></span>
<span>6 <input type="checkbox" name="limitї]" value="f" /></span>
<input type="submit" />
</form>
</body>
</html>edit: this script is not tested at all
-
fariquzeli
- Forum Contributor
- Posts: 144
- Joined: Mon Jun 24, 2002 9:16 am
- Location: Chicago
- Contact:
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:
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.
here is the code i'm working with:
Code: Select all
<style type="text/css">
span {border: 1px solid black; }
</style>
<script language="JavaScript">
function check()
{
count=0;
for (i=0; i!=form1.children.length; i++)
{
if (form1.childrenїi].tagName.toUpperCase() != "SPAN")
break;
else if (form1.childrenїi].childrenї0].checked == true)
count++;
}
while(i!=0)
{
i--;
if (count > 2)
{
if (form1.childrenїi].childrenї0].checked == false)
form1.childrenїi].childrenї0].disabled = true;
}
else
{
if (form1.childrenїi].childrenї0].checked == false)
form1.childrenїi].childrenї0].disabled = false;
}
}
return true;
}
</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ї]" type="checkbox" id="limitї]" 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ї]" type="checkbox" id="limitї]" 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ї]" 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ї]" type="checkbox" id="limitї]" 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ї]" type="checkbox" id="limitї]" 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ї]" 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ї]" type="checkbox" id="limitї]" 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ї]" type="checkbox" id="limitї]" 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ї]" 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ї]" 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ї]" type="checkbox" id="limitї]" 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ї]" 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ї]" 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ї]" type="checkbox" id="limitї]" 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ї]" 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ї]" 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ї]" type="checkbox" id="limitї]" 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ї]" type="checkbox" id="limitї]" 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>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.
-
fariquzeli
- Forum Contributor
- Posts: 144
- Joined: Mon Jun 24, 2002 9:16 am
- Location: Chicago
- Contact:
use
instead of echo
Code: Select all
print_r($limit);