Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 110
  • Last Modified:

Checkboxes - CheckALL within a Table

I have a form which includes a section with checkboxes. The checkboxes are in a table. Each checkbox has a unique name. The data is eventually sent to a database and as an email message. I want to have an option for the checkboxes to CHECKALL (starting line 70). Is it possible to do this within the table and maintain my unique field names?

Code is included
<!DOCTYPE html>
<!-- #Include Virtual="CodeReuse/ConnComparisonChartTesting.inc" -->


<%
title = "Request Form"

dim ChartID
ChartID = session("ChartID")

%>


<html>

<head>

<link rel=stylesheet type="text/css"
  href="CodeReuse/style.css">


<style type="text/css">
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
}
</style>


</head>



<!-------------------------------------------------------------------------------------------->
<!------------------------------------ Continue the code ------------------------------------->
<title><%=title%></title>

<body>

<h2><%=title%></h2>  



<form method="POST" action="Eligible2.asp" onsubmit="return FrontPage_Form1_Validator(this)" name="FrontPage_Form1" language="JavaScript">



<!-------------------------------------------------------------------------------------------->
<!----------------------------- REQUESTOR'S PERSONAL INFORMATION ----------------------------->

<p><b>First Name:&nbsp; </b>
<!--webbot bot="Validation" s-display-name="First_Name" b-value-required="TRUE" i-minimum-length="3" i-maximum-length="250" -->
<input name="LSRequestorsFName" type="text" size="75" maxlength="250"></p>
  
<p><b>Last Name:&nbsp; </b>
<!--webbot bot="Validation" s-display-name="Last_Name" b-value-required="TRUE" i-minimum-length="3" i-maximum-length="255" -->
<input name="LSRequestorsLName" type="text" size="75" maxlength="255"></p>
  
<p><b>Email:&nbsp;</b>
<!--webbot bot="Validation" s-display-name="Email" b-value-required="TRUE" i-minimum-length="5" -->
<input name="LSRequestorsEmail" type="text" size="50"></p>

<p><b>Phone Number:&nbsp;</b>
<input name="LSRequestorsPhone" type="text" size="50"></p>

<hr>
<b>Subject of Search (describe in detail):</b><br>
	<textarea rows="2" name="LSQuestion" cols="75"></textarea>

<p><b>Categories:</b></p>
	<blockquote>
		<table style="width: 600px">
			<tr>
				<td valign="top" style="width: 300px" class="style1">
					<input type="checkbox" value="1" name="LSCatHuman">Human<br>
					<input type="checkbox" value="1" name="LSCatAnimal">Animal<br>
					<input type="checkbox" value="1" name="LSCatFemale">Female<br>
					<input type="checkbox" value="1" name="LSCatMale">Male
				</td>
				
				<td style="width: 300px" class="style1">
					<input type="checkbox" value="1" name="LSCatInfant">Infant (birth-23 months)<br>
					<input type="checkbox" value="1" name="LSCatChild">Child (birth-18 years)<br>
					<input type="checkbox" value="1" name="LSCatAdult19">Adult (19+ years)<br>
					<input type="checkbox" value="1" name="LSCatAdult44">Middle Age (44-64 years)<br>
					<input type="checkbox" value="1" name="LSCatAged">Aged (65+ years)
				</td>
			</tr>
		</table>
	</blockquote>




<!------------------------------------ TIME TO SUBMIT ------------------------------------>

<hr>
<input type="hidden" name="LSSubmitDate" value="<%=Date()%>">
<input type="hidden" name="ChartID" value="<%=session("ChartID")%>">
<input type="submit" value="Submit Request">
<input type="reset" value="Clear">


<p>&nbsp;</p>


</form> 

</body>


</html>

Open in new window

0
Malloy1446
Asked:
Malloy1446
  • 11
  • 10
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
line 72 : <table style="width: 600px" id="mytable">
you checkall checkbox : <input type="checkbox" id="checkboxAll" />

put the following in head section :
<script>
window.onload = function() {
   document.getElementById("checkboxAll").onchange = function() {
        var isChecked = this.checked;
        var checkboxes = document.getElementById("mytable").getElementsByTagName("input");
        for(var i=0;i<checkboxes.length;i++) {
           if(checkboxes[i].type == "checkbox") {
               checkboxes[i].checked = isChecked;
           }
        }
   }
}
</script>

Open in new window

Instead, if you've jQuery :
<script>
jQuery(function($) {
     $("#checkboxAll").change(function() {
          $("#mytable :checkbox").attr("checked", $(this).is(":checked"));
     });
});
</script>

Open in new window

0
 
Malloy1446Author Commented:
I added the script in the Header as posted.

I added the id to the table:
            <table style="width: 600px" id="mytable">

I added the id to each of the checkboxes:
            <input type="checkbox" value="1" name="LSCatHuman" id="checkboxAll" />Human<br>

I needed a checkbox for the CheckALL option so added the following:
            <input type="checkbox" id="checkboxAll" />Check All

When I try checking the CheckAll check box, it does nothing.
0
 
leakim971PluritechnicianCommented:
I added the id to each of the checkboxes:

no, add it to the checkall checkbox only...
<input type="checkbox" id="checkboxAll" />Check All
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Malloy1446Author Commented:
Still is not checking all the boxes!
Checked IE and Firefox, neither one are checking all the boxes when I check "CheckAll"

Table line code:
    <table style="width: 600px" id="mytable">

My options are coded:
    <input type="checkbox" value="1" name="LSCatHuman">Human<br>

My checkall box:
    <input type="checkbox" id="checkboxAll" />Check All
0
 
lenamtlCommented:
Hi,

I'm using this for javascript code
$('#selectAll').click(function (e) {
    $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
});

Open in new window


and this for the checkbox
<tr>
        <th>
            <input type="checkbox" id="selectAll" />
        </th>
        <th>Select All</th>
    </tr>

Open in new window

0
 
Malloy1446Author Commented:
Are you replacing your original script with just the 3 lines?


I tried replacing and am using your code for the checkbox ALL, still not working.
0
 
lenamtlCommented:
Hi,

I think you got confused.
I proposed you a different script, so make sure previous script regarding check all is commented // or removed.
Add the javascript code I posted and edit the <th> for the select all checkbox on your table
The javascript code need to be place between <script> </script> tags let say in the <head> </head> part of your page.

Check a working example:
http://jsfiddle.net/arunpjohny/bzpBB/

if it's not working after that check using chrome dev tool or Firefox dev tool if you have an error this will help.
0
 
Malloy1446Author Commented:
I looked at the Firefox dev tool and tried to debug but it did not find any errors.

The checkall does not work in either IE or Firefox. Your example is working on fiddle.
I am attaching the code again to see if you can see the error, I sure can't and it is frustrating (as I am sure it is for you!)

<!DOCTYPE html>
<!-- #Include Virtual="CodeReuse/ConnComparisonChartTesting.inc" -->


<%
title = "Request Form"

dim ChartID
ChartID = session("ChartID")

%>


<html>

<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 12.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

<link rel=stylesheet type="text/css"
  href="/CodeReuse/style.css">


<style type="text/css">
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
}
.style2 {
				font-weight: bold;
}
</style>


<!-- Check all CHECKBOXES function -->

<script>
$('#selectAll').click(function (e) {
    $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
});
</script>


</head>



<!-------------------------------------------------------------------------------------------->
<!------------------------------------ Continue the code ------------------------------------->
<title><%=title%></title>

<body>

<h2><%=title%></h2>  

<b>Location: VISN <%=session("VISNID")%> -- <%=session("FacName")%> (<%=session("City")%>, <%=session("State")%>)</b>



<!-------------------------------------------------------------------------------------------->

<br>


<%
'response.Write("chartID: " & session("ChartID"))
'response.End()
%>

<hr>



<form method="POST" action="Eligible2.asp" onsubmit="return FrontPage_Form1_Validator(this)" name="FrontPage_Form1" language="JavaScript">



<!-------------------------------------------------------------------------------------------->
<!----------------------------- REQUESTOR'S PERSONAL INFORMATION ----------------------------->

<p><b>First Name:&nbsp; </b>
<!--webbot bot="Validation" s-display-name="First_Name" b-value-required="TRUE" i-minimum-length="2" i-maximum-length="250" -->
<input name="LSRequestorsFName" type="text" size="75" maxlength="250"></p>
  
<p><b>Last Name:&nbsp; </b>
<!--webbot bot="Validation" s-display-name="Last_Name" b-value-required="TRUE" i-minimum-length="3" i-maximum-length="255" -->
<input name="LSRequestorsLName" type="text" size="75" maxlength="255"></p>
  
<p><b>Service:&nbsp;</b>
<input name="LSRequestorsService" type="text" size="75"></p>

<p><b>Email:&nbsp;</b>
<!--webbot bot="Validation" s-display-name="Email" b-value-required="TRUE" i-minimum-length="5" -->
<input name="LSRequestorsEmail" type="text" size="50"></p>

<p><b>Phone Number:&nbsp;</b>
<input name="LSRequestorsPhone" type="text" size="50"></p>

<!-------------------------------------------------------------------------------------------->
<!----------------------------- SEARCH REQUEST DETAILS---------- ----------------------------->

<hr>
<b>Subject (describe in detail):</b><br>
	<!--webbot bot="Validation" s-display-name="Subject of Literature Search" b-value-required="TRUE" i-minimum-length="10" -->
	<textarea rows="2" name="LSQuestion" cols="75"></textarea>

<p><b>Language:</b>&nbsp;
	<input type="radio" value="English" name="LSLanguage">English&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" value="ALL Languages" name="LSLanguage">ALL Languages&nbsp;&nbsp;&nbsp;&nbsp;
	<b>Specify Languages: </b>
		<input name="LSLanguageCust" type="text" size="50"></p>


<p><b>Categories:</b></p>
	<blockquote>
		<table>
			<tr>
				<th><input type="checkbox" id="selectAll" />Check All</th>
			</tr>
				
			<tr>
				<td>
					<input type="checkbox" value="1" name="LSCatHuman">Human<br>
					<input type="checkbox" value="1" name="LSCatAnimal">Animal<br>
					<input type="checkbox" value="1" name="LSCatFemale">Female<br>
					<input type="checkbox" value="1" name="LSCatMale">Male<br>
					<input type="checkbox" value="1" name="LSCatInfant">Infant (birth-23 months)<br>
					<input type="checkbox" value="1" name="LSCatChild">Child (birth-18 years)<br>
					<input type="checkbox" value="1" name="LSCatAdult19">Adult (19+ years)<br>
					<input type="checkbox" value="1" name="LSCatAdult44">Middle Age (44-64 years)<br>
					<input type="checkbox" value="1" name="LSCatAged">Aged (65+ years)
				</td>
			</tr>
		</table>
	</blockquote>

Open in new window

0
 
leakim971PluritechnicianCommented:
0
 
Malloy1446Author Commented:
OK!!!  

Works in FireFox but not IE!
I really need it to work in IE also.
0
 
leakim971PluritechnicianCommented:
work fine on ie 9,10,11 and 12
did you cleared your cache?
0
 
Malloy1446Author Commented:
Cleared cache.
Restarted IE9.
Still not working....
0
 
leakim971PluritechnicianCommented:
the jsfiddle or your integration ?
0
 
Malloy1446Author Commented:
Viewing jsfiddle with IE9, the checkbox all works.

Opening the actual page on IE9, it does NOT work.
0
 
leakim971PluritechnicianCommented:
and without the code, you don't see any error (yellow triangle with exclamation mark) in the actual page? (
0
 
leakim971PluritechnicianCommented:
my first post :

line 72 : <table style="width: 600px" id="mytable">
you checkall checkbox : <input type="checkbox" id="checkboxAll" />
0
 
Malloy1446Author Commented:
OK... this is strange. I moved the check all box.
When I click Check All, notthing happens,
If CHECK ALL is checked and I check HUMAN (the first checkbox) they all become checked except Human.
If CHECK ALL is NOT checked and I check HUMAN only Human is checked.


<p><b>Categories:</b></p>
	<blockquote>
		<table style="width: 600px" id="mytable">
		<tr>
		<td valign="top" style="width: 300px" class="style1">
		<input type="checkbox" id="checkboxAll">Check All<br>
		<input type="checkbox" value="1" name="LSCatHuman">Human<br>
		<input type="checkbox" value="1" name="LSCatAnimal">Animal<br>
		<input type="checkbox" value="1" name="LSCatFemale">Female<br>
		<input type="checkbox" value="1" name="LSCatMale">Male<br>
		<input type="checkbox" value="1" name="LSCatInfant">Infant (birth-23 months)<br>
		<input type="checkbox" value="1" name="LSCatChild">Child (birth-18 years)<br>
		<input type="checkbox" value="1" name="LSCatAdult19">Adult (19+ years)<br>
		<input type="checkbox" value="1" name="LSCatAdult44">Adult (19-44 years)<br>
		<input type="checkbox" value="1" name="LSCatAged">Aged (65+ years)
		</td>
			</tr>
		</table>
	</blockquote>

Open in new window

0
 
leakim971PluritechnicianCommented:
http://jsfiddle.net/ad10Lfhn/5/

window.onload = function() {
   document.getElementById("checkboxAll").onchange = function() {
        var isChecked = this.checked;
        var checkboxes = document.getElementById("mytable").getElementsByTagName("input");
        for(var i=0;i<checkboxes.length;i++) {
           if(checkboxes[i].type == "checkbox" && checkboxes[i].id != "checkboxAll") {
               checkboxes[i].checked = isChecked;
           }
        }
   }

Open in new window

0
 
Malloy1446Author Commented:
Same thing!  
Still works on FireFox
0
 
leakim971PluritechnicianCommented:
share a link to your page or build an exact test page somewhere
0
 
Malloy1446Author Commented:
I am unable to share a link, everything is behind a firewall.
0
 
leakim971PluritechnicianCommented:
share a link to your page or build an exact test page somewhere
0
 
Malloy1446Author Commented:
I copied the page to a different site and it does work fine with IE9
     http://www.dianefitzgerald.com/_Test/Eligible.asp

Now I will need to figure out what is wrong with the site hosting the website where I need the file.

Thank you for sticking with this.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 11
  • 10
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now