PDA

View Full Version : Counting check boxes

gregw
03-19-2003, 04:34 AM
I'm trying to accomplish a couple of things with Javascript. I'd like to provide a form that a user can check a number of different check boxes, 5 out of 10 for example. Upon checking those boxes I'd like to validate the number checked and provide an error message if over or under the users known amount. There are 10 choices available but the user is only allowed to pick 5 for example.

Also would like to receive an email with their specific selections after this validation.

I've created the form and I'm receiving an email after checking some boxes and clicking on the submit buttom but I'm just receiving garbage. I'm looking for help with validating the correct number of checks and how to pass the name or label of the items checked to my email address.

Thanks for your help!
joh6nn
03-19-2003, 04:40 AM
a link to the page this is on would be great. barring that, could you post the code here? it's always easier to come up with something, when you have the code in front of you.
gregw
03-19-2003, 04:49 AM
Thanks John,

That makes sense. Here's some that I have been testing. I'm thinking I should be placing some instructions where it now says "do whatever"


<html>
<head>
<title> Type_Document_Title_Here </title>
<meta name="generator" content="Sausage Software HotDog Professional 6">
</head>
<body>



<form name="example" method="post" action="mailto:gwolfe@wi.rr.com">
<input type="checkbox" name="myboxes"><br>
<input type="checkbox" name="myboxes"><br>
<input type="checkbox" name="myboxes"><br>
<input type="checkbox" name="myboxes"><br>
<input type="checkbox" name="myboxes"><br>
<input type="checkbox" name="myboxes"><br>
<input type="checkbox" name="myboxes"><br>
<input type="checkbox" name="myboxes"><br>
<input type="checkbox" name="myboxes"><br>
<input type="checkbox" name="myboxes"><br>
</form>

<script>
//accesses the 3rd checkbox
document.example.myboxes[2]
//accesses the last checkbox
document.example.myboxes[9]
//accesses each and every one of the boxes
for (i=0;i<document.example.myboxes.length;i++)
document.example.myboxes[i]=//do whatever

</script>

<form method="post" title="example" action="mailto:gwolfe@wi.rr.com">
<input type="submit" name="example" value="Submit my Choices">



</body>
cheesebagpipe
03-19-2003, 10:02 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var iBoxmax = 5; //maximum number allowed

function boxLimit(oLastbox, iMax) { //pass reference to calling checkbox, limit number
var oEl, e = 0, iChecked = 0, f = document.forms[0]; //declare variables, get form pointer
var sMsg = '\nYou have exceeded the maximum number of checked items allowed.\n\n'; //prompt
sMsg += 'Please deselect checked items before choosing new ones! Thanks.\n\n'; //more prompt
while (oEl = f.elements[e++]) if (oEl.type == 'checkbox' && oEl.checked) ++iChecked; //iterate through form, bumping counter when checked checkbox found
if (iChecked > iMax) { //too many!
alert(sMsg); //prompt
return (oLastbox.checked = false); //uncheck last (calling) box
}
}

</script>
</head>
<body>
<font color="green">
<form>
<input type="checkbox" name="choice" value="item1" onclick="if (this.checked)boxLimit(this,iBoxmax)"> item 1<br>
<input type="checkbox" name="choice" value="item2" onclick="if (this.checked)boxLimit(this,iBoxmax)"> item 2<br>
<input type="checkbox" name="choice" value="item3" onclick="if (this.checked)boxLimit(this,iBoxmax)"> item 3<br>
<input type="checkbox" name="choice" value="item4" onclick="if (this.checked)boxLimit(this,iBoxmax)"> item 4<br>
<input type="checkbox" name="choice" value="item5" onclick="if (this.checked)boxLimit(this,iBoxmax)"> item 5<br>
<input type="checkbox" name="choice" value="item6" onclick="if (this.checked)boxLimit(this,iBoxmax)"> item 6<br>
<input type="checkbox" name="choice" value="item7" onclick="if (this.checked)boxLimit(this,iBoxmax)"> item 7<br>
<input type="checkbox" name="choice" value="item8" onclick="if (this.checked)boxLimit(this,iBoxmax)"> item 8<br>
<input type="checkbox" name="choice" value="item9" onclick="if (this.checked)boxLimit(this,iBoxmax)"> item 9<br>
<input type="checkbox" name="choice" value="item10" onclick="if (this.checked)boxLimit(this,iBoxmax)"> item 10<br><br>
<input type="reset">
</form>
</font>
</body>
</html>
gregw
03-19-2003, 11:35 PM
Thanks Cheesebagpipe!!!

Since I'm just a rookie with JS what would it take to get you to comment this code like you did in the first line //maximum number allowed.

Also how do I receive a list of items checked via email. I post it to my email address but I don't see the items or values selected.

I really appreciate this code and your help!!!

Greg
cheesebagpipe
03-19-2003, 11:49 PM
Commenting added.
This: onclick="if (this.checked)...just ensures that the box hasn't been un-checked instead.
You can also pass a literal (integer) as the iMax argument.

Try changing your form method to "GET" (& you're welcome:D).
gregw
03-19-2003, 11:56 PM
Hmm, changing the method to get opens a email dialog box.

I'll try to work thru this.

Thanks again
gregw
03-20-2003, 12:05 AM
Hey cheesebagpipe,

Outlook couldn't read the .att file but I reviewed it in Mailwasher and it did provide the choices within the checkboxes. I was hoping it would be easier to read. Here's what it produced, using post BTW.

This is a multi-part message in MIME format.

------=_NextPart_000_000F_01C2EE42.3EACA7F0
Content-Type: text/plain;
charset="iso-8859-1"
Content-Transfer-Encoding: 7bit



------=_NextPart_000_000F_01C2EE42.3EACA7F0
Content-Type: application/octet-stream;
name="POSTDATA.ATT"
Content-Transfer-Encoding: quoted-printable
Content-Disposition: attachment;
filename="POSTDATA.ATT"

choice=3Ditem3&choice=3Ditem5&choice=3Ditem6&choice=3Ditem7&choice=3Ditem=
8&choice=3DSubmit+my+Choices
------=_NextPart_000_000F_01C2EE42.3EACA7F0--
cheesebagpipe
03-20-2003, 12:09 AM
http://wdvl.internet.com/Authoring/HTML/Forms/mailto.html
gregw
03-20-2003, 01:33 AM
Perfect Cheesebagpipe!

Thanks again, Excellent, I'm so excited to see this work.

YEH!!!:rolleyes: :thumbsup: :p :)