Solved

Checkboxes - CheckALL within a Table

Posted on 2014-12-28
23
83 Views
Last Modified: 2014-12-30
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
Comment
Question by:Malloy1446
  • 11
  • 10
  • 2
23 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40521239
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
 

Author Comment

by:Malloy1446
ID: 40521272
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40521655
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
 

Author Comment

by:Malloy1446
ID: 40521807
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
 
LVL 24

Expert Comment

by:lenamtl
ID: 40521826
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
 

Author Comment

by:Malloy1446
ID: 40521862
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
 
LVL 24

Expert Comment

by:lenamtl
ID: 40521880
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
 

Author Comment

by:Malloy1446
ID: 40521981
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40522078
0
 

Author Comment

by:Malloy1446
ID: 40522367
OK!!!  

Works in FireFox but not IE!
I really need it to work in IE also.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522374
work fine on ie 9,10,11 and 12
did you cleared your cache?
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:Malloy1446
ID: 40522422
Cleared cache.
Restarted IE9.
Still not working....
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522425
the jsfiddle or your integration ?
0
 

Author Comment

by:Malloy1446
ID: 40522457
Viewing jsfiddle with IE9, the checkbox all works.

Opening the actual page on IE9, it does NOT work.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522463
and without the code, you don't see any error (yellow triangle with exclamation mark) in the actual page? (
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522467
my first post :

line 72 : <table style="width: 600px" id="mytable">
you checkall checkbox : <input type="checkbox" id="checkboxAll" />
0
 

Author Comment

by:Malloy1446
ID: 40522578
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40522610
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
 

Author Comment

by:Malloy1446
ID: 40522646
Same thing!  
Still works on FireFox
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522648
share a link to your page or build an exact test page somewhere
0
 

Author Comment

by:Malloy1446
ID: 40522733
I am unable to share a link, everything is behind a firewall.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40522735
share a link to your page or build an exact test page somewhere
0
 

Author Comment

by:Malloy1446
ID: 40523693
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now