Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to determine 'checked' status for 18 checkboxes?

Status
Not open for further replies.
mopacfan

mopacfan

Programmer
Oct 30, 2000
190
US
Ok, I got my form working and all is good with the world, well - sort of. I need to test to make sure that at least one of the 18 check boxes is "checked" before the form will submit. The input fields are named "c1" through "c18". I need a javascript function that will allow me to check all of the boxes for the status of "checked". If so, then the form can submit. If not, an alert pops up requesting at least one box be checked.

my code so far:
---------------
<script language=&quot;javascript&quot;>
<!--//
var arybox = new Array();
i=0
while (i<=18){
arybox = &quot;&quot;
i++
}

function getspecs(box,num,fld){
if (box.checked == true){
var spec = fld + &quot;: &quot; + prompt(&quot;Please specify the size(s) you would like to receive:&quot;,arybox[num]);
arybox[num] = spec;
}
}

function submitspecs(){
var specval = &quot;&quot;
i=0
while (i<=18){
if(arybox != &quot;&quot;){
specval = specval + i + &quot;,&quot; + arybox + &quot;\n&quot;;
}
i++
}
document.samples.specs.value = specval;
//alert(specval)
}

function submitform(){
if (document.samples.name.value.length <= 0){
alert(&quot;Please enter your name.\n&quot;);
document.samples.name.focus();
return false;
}
if (document.samples.address.value.length <= 0){
alert(&quot;Please enter your address.\n&quot;);
document.samples.address.focus();
return false;
}
if (document.samples.city.value.length <= 0){
alert(&quot;Please enter your city.\n&quot;);
document.samples.city.focus();
return false;
}
if (document.samples.state.value.length <= 0){
alert(&quot;Please enter your state.\n&quot;);
document.samples.state.focus();
return false;
}
if (document.samples.zip.value.length < 4){
alert(&quot;Please enter your zipcode.\n&quot;);
document.samples.zip.focus();
return false;
}
if (document.samples.company.value.length <= 0){
alert(&quot;Please enter your company name.\n&quot;);
document.samples.company.focus();
return false;
}
if (document.samples.phone.value.length <= 0){
alert(&quot;Please enter your phone number.\n&quot;);
document.samples.phone.focus();
return false;
}
if (document.samples.email.value.length <= 0){
alert(&quot;Please enter your email.\n&quot;);
document.samples.email.focus();
return false;
}
submitspecs();
document.samples.submit();
return true;
}
//-->
</script>
 
Sort by date Sort by votes
If you can always count on the checkboxes being names c1 through c18, you can do something like this:

Code: 
function sendMess()
{
 for(i=1; i<=18; i++)
 {
  var cb = eval(&quot;c&quot;+i);
  if(cb.checked)
  {
   //OK.  At least one checked.
   return true;
  }
 }

 alert('You must check at least one checkbox to submit.');
 return false;
}

Is that what you're after? Obviously, you'll have to modify to meet your exact needs, but I think this addresses your question.

--Dave
 
Upvote 0 Downvote
Dave,

Thank you very much, this is what I was looking for.

Michael
 
Upvote 0 Downvote
One problem, I get a js error &quot;c1 is undefined&quot;. Any suggestions? The form is named &quot;samples&quot;.

MN
 
Upvote 0 Downvote
Change the eval statement to:

Code: 
var cb = eval(&quot;samples.c&quot;+i);

When the elements are in a form, they need to be referenced with the form name.

Let us know if that works.

--Dave
 
Upvote 0 Downvote
<script language=&quot;javascript&quot;>
<!--//
var arybox = new Array();
i=0
while (i<=18){
arybox = &quot;&quot;
i++
}

function getspecs(box,num,fld){
if (box.checked == true){
var spec = fld + &quot;: &quot; + prompt(&quot;Please specify the size(s) you would like to receive:&quot;,arybox[num]);
arybox[num] = spec;
}
}

function submitspecs(){
var specval = &quot;&quot;
i=0
while (i<=18){
if(arybox != &quot;&quot;){
specval = specval + i + &quot;,&quot; + arybox + &quot;\n&quot;;
}
i++
}
document.samples.specs.value = specval;
//alert(specval)
}

function submitform(){
if (document.samples.name.value.length <= 0){
alert(&quot;Please enter your name.\n&quot;);
document.samples.name.focus();
return false;
}
if (document.samples.address.value.length <= 0){
alert(&quot;Please enter your address.\n&quot;);
document.samples.address.focus();
return false;
}
if (document.samples.city.value.length <= 0){
alert(&quot;Please enter your city.\n&quot;);
document.samples.city.focus();
return false;
}
if (document.samples.state.value.length <= 0){
alert(&quot;Please enter your state.\n&quot;);
document.samples.state.focus();
return false;
}
if (document.samples.zip.value.length < 4){
alert(&quot;Please enter your zipcode.\n&quot;);
document.samples.zip.focus();
return false;
}
if (document.samples.company.value.length <= 0){
alert(&quot;Please enter your company name.\n&quot;);
document.samples.company.focus();
return false;
}
if (document.samples.phone.value.length <= 0){
alert(&quot;Please enter your phone number.\n&quot;);
document.samples.phone.focus();
return false;
}
if (document.samples.email.value.length <= 0){
alert(&quot;Please enter your email.\n&quot;);
document.samples.email.focus();
return false;
}
for(i=1; i<=18; i++){
var cb = eval(&quot;document.samples.c&quot;+i);
if(cb.checked){
//OK. At least one checked.
return true;
}
}
alert('You must select at least one product before this form will submit.');
return false;



submitspecs();
document.samples.submit();
return true;
}
//-->
</script>


----------------
I now get &quot;checked is null or not an object&quot;
 
Upvote 0 Downvote
Can you post your form-HTML also? Also, what browser are you using. Also, enclose posted code between
Code: 
 and
tags to avoid the italics.

--Dave
 
Upvote 0 Downvote
You can also use the form elements array.

var lgn = document.formName.length;

for(var i = 0; i < lgn; i++){

if(document.formName.type == &quot;checkbox&quot; && document.formName.checked == true){

alert(document.formName+&quot; is checked&quot;);

break;

}

}
 
Upvote 0 Downvote
Ok, here is the complete page, script and form code. Dave, I turned off tgml since that was reading my code as formatting information.
--------------------------------


<script language=&quot;javascript&quot;>
<!--//
var arybox = new Array();
i=0
while (i<=18){
arybox = &quot;&quot;
i++
}

function getspecs(box,num,fld){
if (box.checked == true){
var spec = fld + &quot;: &quot; + prompt(&quot;Please specify the size(s) you would like to receive:&quot;,arybox[num]);
arybox[num] = spec;
}
}

function submitspecs(){
var specval = &quot;&quot;
i=0
while (i<=18){
if(arybox != &quot;&quot;){
specval = specval + i + &quot;,&quot; + arybox + &quot;\n&quot;;
}
i++
}
document.samples.specs.value = specval;
//alert(specval)
}

function submitform(){
if (document.samples.name.value.length <= 0){
alert(&quot;Please enter your name.\n&quot;);
document.samples.name.focus();
return false;
}
if (document.samples.address.value.length <= 0){
alert(&quot;Please enter your address.\n&quot;);
document.samples.address.focus();
return false;
}
if (document.samples.city.value.length <= 0){
alert(&quot;Please enter your city.\n&quot;);
document.samples.city.focus();
return false;
}
if (document.samples.state.value.length <= 0){
alert(&quot;Please enter your state.\n&quot;);
document.samples.state.focus();
return false;
}
if (document.samples.zip.value.length < 4){
alert(&quot;Please enter your zipcode.\n&quot;);
document.samples.zip.focus();
return false;
}
if (document.samples.company.value.length <= 0){
alert(&quot;Please enter your company name.\n&quot;);
document.samples.company.focus();
return false;
}
if (document.samples.phone.value.length <= 0){
alert(&quot;Please enter your phone number.\n&quot;);
document.samples.phone.focus();
return false;
}
if (document.samples.email.value.length <= 0){
alert(&quot;Please enter your email.\n&quot;);
document.samples.email.focus();
return false;
}
for(i=1; i<=18; i++){
var cb = eval(&quot;document.samples.c&quot;+i);
if(cb.checked){
//OK. At least one checked.
return true;
}
}
alert('You must select at least one product before this form will submit.');
return false;



submitspecs();
document.samples.submit();
return true;
}
//-->
</script>


<table border=&quot;0&quot; width=&quot;585&quot; cellspacing=&quot;0&quot; cellpadding=&quot;10&quot;>
<tr>
<td valign=&quot;top&quot;><center>
<h1>Sample Request</h1>
</center></td>
</tr>
<tr>
<td valign=&quot;top&quot;>
<form method=&quot;POST&quot; action=&quot;sample_response.asp&quot; name=&quot;samples&quot;>
<table border=&quot;0&quot; width=&quot;100%&quot; cellspacing=&quot;0&quot; cellpadding=&quot;2&quot;>
<tr>
<td align=&quot;right&quot;><font color=&quot;#FF0000&quot;>*</font><font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#CCCCCC&quot;><b>Name:</b></font></td>
<td><input type=&quot;text&quot; name=&quot;name&quot; size=&quot;20&quot; tabindex=&quot;0&quot;></td>
<td align=&quot;right&quot;><font color=&quot;#FF0000&quot;>*</font><font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#CCCCCC&quot;><b>Company:</b></font></td>
<td><input type=&quot;text&quot; name=&quot;company&quot; size=&quot;25&quot;></td>
</tr>
<tr>
<td align=&quot;right&quot;><font color=&quot;#FF0000&quot;>*</font><font color=&quot;#CCCCCC&quot;><b><font face=&quot;Verdana&quot; size=&quot;2&quot;>Address:</font></b></font></td>
<td><input type=&quot;text&quot; name=&quot;address&quot; size=&quot;25&quot;><font color=&quot;#CCCCCC&quot;><b><font face=&quot;Verdana&quot; size=&quot;1&quot;><br>
(no p.o. boxes please)</font></b></font></td>
<td align=&quot;right&quot;><font color=&quot;#FF0000&quot;>*</font><font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#CCCCCC&quot;><b>Phone:</b></font></td>
<td><input type=&quot;text&quot; name=&quot;phone&quot; size=&quot;15&quot;></td>
</tr>
<tr>
<td align=&quot;right&quot;><font color=&quot;#FF0000&quot;>*</font><font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#CCCCCC&quot;><b>City:</b></font></td>
<td><input type=&quot;text&quot; name=&quot;city&quot; size=&quot;20&quot;></td>
<td align=&quot;right&quot;><font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#CCCCCC&quot;><b>Fax:</b></font></td>
<td><input type=&quot;text&quot; name=&quot;fax&quot; size=&quot;15&quot;></td>
</tr>
<tr>
<td align=&quot;right&quot;><font color=&quot;#FF0000&quot;>*</font><font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#CCCCCC&quot;><b>State:</b></font></td>
<td><input type=&quot;text&quot; name=&quot;state&quot; size=&quot;2&quot;></td>
<td align=&quot;right&quot;><font color=&quot;#FF0000&quot;>*</font><font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#CCCCCC&quot;><b>Email:</b></font></td>
<td><input type=&quot;text&quot; name=&quot;email&quot; size=&quot;25&quot;></td>
</tr>
<tr>
<td align=&quot;right&quot;><font color=&quot;#FF0000&quot;>*</font><font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#CCCCCC&quot;><b>Zipcode:</b></font></td>
<td><input type=&quot;text&quot; name=&quot;zip&quot; size=&quot;15&quot;></td>
<td align=&quot;right&quot;><font face=&quot;Verdana&quot; size=&quot;2&quot; color=&quot;#CCCCCC&quot;><b>SIC code:</b></font></td>
<td><input type=&quot;text&quot; name=&quot;sic&quot; size=&quot;5&quot;></td>
</tr>
</table>
<br>
 <br>
<div align=&quot;center&quot;>
<center>
<table border=&quot;0&quot; width=&quot;80%&quot; cellspacing=&quot;0&quot; cellpadding=&quot;2&quot;>
<tr>
<td width=&quot;50%&quot; align=&quot;center&quot; style=&quot;border-bottom: 1 solid #FFFFFF&quot;><b><font color=&quot;#CCCCCC&quot;>Protective Products</font></b></td>
<td width=&quot;50%&quot; align=&quot;center&quot; style=&quot;border-bottom: 1 solid #FFFFFF&quot;><b><font color=&quot;#CCCCCC&quot;>Masking Products</font></b></td>
</tr>
<tr>
<td width=&quot;50%&quot;><input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C1&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,1,'Round Plastic Caps');&quot;>Round Plastic Caps</td>
<td width=&quot;50%&quot; align=&quot;right&quot;>Vinyl Masking Caps <input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C9&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,9,'Vinyl Masking Caps');&quot;></td>
</tr>
<tr>
<td width=&quot;50%&quot;><input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C2&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,2,'Pull Tab Caps');&quot;>Pull Tab Caps</td>
<td width=&quot;50%&quot; align=&quot;right&quot;>Vinyl Masking Plugs <input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C10&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,10,'Vinyl Masking Plugs');&quot;></td>
</tr>
<tr>
<td width=&quot;50%&quot;><input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C3&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,3,'Square Plastic Caps');&quot;>Square Plastic Caps</td>
<td width=&quot;50%&quot; align=&quot;right&quot;>EPDM Caps & Plugs <input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C11&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,11,'EPDM Caps - Plugs');&quot;></td>
</tr>
<tr>
<td width=&quot;50%&quot;><input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C4&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,4,'Round Plastic Grips');&quot;>Round Plastic Grips</td>
<td width=&quot;50%&quot; align=&quot;right&quot;>Silicone Caps & Plugs <input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C12&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,12,'Silicone Caps - Plugs');&quot;></td>
</tr>
<tr>
<td width=&quot;50%&quot;><input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C5&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,5,'Flat Rectangular Caps - Grips');&quot;>Flat Rectangular Caps & Grips</td>
<td width=&quot;50%&quot; align=&quot;right&quot;>Pull Plugs <input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C13&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,13,'Pull Plugs');&quot;></td>
</tr>
<tr>
<td width=&quot;50%&quot;><input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C6&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,6,'Shipping Plugs');&quot;>Shipping Plugs</td>
<td width=&quot;50%&quot; align=&quot;right&quot;>Washer Plugs <input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C14&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,14,'Washer Plugs');&quot;></td>
</tr>
<tr>
<td width=&quot;50%&quot;><input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C7&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,7,'Protective Netting');&quot;>Protective Netting</td>
<td width=&quot;50%&quot; align=&quot;right&quot;>Silicone Rubber Tubing <input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C15&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,15,'Silicone Rubber Tubing');&quot;></td>
</tr>
<tr>
<td width=&quot;50%&quot;><input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C8&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,8,'Silicone Tape');&quot;>Silicone Tape</td>
<td width=&quot;50%&quot; align=&quot;right&quot;>Polyester & Kapton Tape <input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C16&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,16,'Polyester - Kapton Tape');&quot;></td>
</tr>
<tr>
<td width=&quot;50%&quot;></td>
<td width=&quot;50%&quot; align=&quot;right&quot;>Polyester & Kapton Discs <input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C17&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,17,'Polyester - Kapton Discs');&quot;></td>
</tr>
<tr>
<td width=&quot;50%&quot;></td>
<td width=&quot;50%&quot; align=&quot;right&quot;>Custom Masking Tapes <input class=&quot;chkbox&quot; type=&quot;checkbox&quot; name=&quot;C18&quot; value=&quot;send&quot; OnClick=&quot;getspecs(this,18,'Custom Masking Tapes');&quot;></td>
</tr>
</table>
</center>
</div>
<p align=&quot;center&quot;><br>
<b><font color=&quot;#CCCCCC&quot;>Comments / Special Requests<br>
</font></b><textarea rows=&quot;5&quot; name=&quot;comments&quot; cols=&quot;60&quot;></textarea></p>
<p align=&quot;center&quot;><input class=&quot;subtn&quot; type=&quot;button&quot; value=&quot;Send me my Free Samples&quot; name=&quot;button&quot; onclick=&quot;submitform();&quot;></p>
<input type=&quot;hidden&quot; name=&quot;specs&quot; value=&quot;x&quot;>
</form>
<p> </td>
</tr>
</table>
 
Upvote 0 Downvote
The problem is that your input fields are named C1 through C18 while your javascript is checking for c1 through c18 (notice the difference in capitalization). Sometimes it is difficult to tell when Javascript will be finicky about capitalization, but I guess this is one of those times.

I was able to duplicate the error you describe with your code as is. When I changed the eval(...) statement to use a capital C instead of lower-case, it worked.

Nice-looking form, by the way!

--Dave
 
Upvote 0 Downvote
Dave,

Thank you very much for your help. I forget that javascript is case so case sensitive. When writing asp, it is not something with which I need to be concerned. I'll definitely pay more attention in the future.

Regards,

Michael
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
345
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
267
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
373
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
471
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top