Print selected items on a page

@IndyBDec 16.2003

I’ve been asked to provide some tricky printing functionality to a dynamicly generated page. The page is to display each record along with a checkbox. Then one print button at the bottom of the page. The idea is to let the user check the box next to each record they want to print, then when they click the print button at the bottom of the page, only those records that were selected will be printed.

I’m assuming some combination of CF and Javascript will be required, but I really don’t know. Any ideas? Thanks in advance!

Below is some basic code to give an idea of what I’m working with:

<form name=”form1″ method=”post” action=””>
<cfoutput query=”records”>
<tr>
<table width=”100″ border=”1″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td><input type=”checkbox” name=”checkbox” value=”checkbox”></td>
<td>#records.fname#</td>
<td>#records.mname#</td>
<td>#records.lname#</td>
</tr>
<tr>
<td colspan=”4″>#records.bio#</td>
</tr>
</table>
</tr>
</cfoutput>
<p>
<input type=”button” value=”Print Cards” onclick=”doprint()”>
</form>

to post a comment

JavaScript

5 Comments(s) _↴

@fredmvDec 16.2003 — #This can be done using CSS and a little JavaScript. I made it so that it hides all [font=courier]<tr>[/font] elements by default and only prints elements in which have a [font=courier]class[/font] of print. That is exactly what the checkbox do, they set the [font=courier]class[/font] of it's containing parent's parent node (the [font=courier]<tr>[/font]) to print. Consider the following example. Here's the CSS you'll need:

&lt;style type="text/css"&gt;
 /*&lt;![CDATA[*/
 @media print {
 tr {
 visibility: hidden;
 }
 .print {
 visibility: visible !important;
 }
 .check {
 display: none;
 }
 }
 /*]]&gt;*/
 &lt;/style&gt;

And here's the HTML:

&lt;table width="100" border="1" cellspacing="0" cellpadding="0" summary=""&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;input type="checkbox" class="check" name="checkbox" value="checkbox" onclick="if(checked == true)parentNode.parentNode.className='print';"&gt;&lt;/td&gt;
 &lt;td&gt;#records.fname#&lt;/td&gt;
 &lt;td&gt;#records.mname#&lt;/td&gt;
 &lt;td&gt;#records.lname#&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td colspan="4"&gt;#records.bio#&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;

Try experimenting with that and tell me how everything works out. ?

@IndyBauthorDec 16.2003 — #Fredmv,

I tried the code you provided (thanks). It's not working as it should. Basically, when I print, it prints all records, regardless of which ones were checked. But here's the interesting thing...it doesn't actually print anything but the table border. Nothing inside the table gets printed. I'm assuming this has something to do with hiding the tr but I don't really know.

I'm using the css code exactly as you provided it. And I implemented the checkbox as you suggested.

Perhaps you can see from my actual code what's going wrong:

<cfoutput query="individuals">

<tr>

<td><input type="checkbox" class="check" name="checkbox" value="checkbox" onclick="if(checked == true)parentNode.parentNode.className='print';"></td>

<td>

<table width="100%" border="2" cellspacing="0" cellpadding="2" bgcolor="white">

<tr>

<td>

<table width="100%" border="0" cellspacing="0" cellpadding="2">

<tr>

<th colspan="5" class="xsmall">Groups</th>

</tr>

<tr>

<td colspan="3" align="left" valign="top"><b>Certificate Number: #individuals.cert_number#</b></td>

<td colspan="2" align="right" valign="top"><img src="pics/sri_idcard.gif" width="300" height="70" alt="" border="0"></td>

</tr>

<tr>

<td colspan="5" valign="top">

<table border="0" width="95%" cellpadding="0" cellspacing="0">

<tr>

<cfquery name="band_header" datasource="sri_online_insurance">

SELECT policy_id, rate_id, x_policy_band_details_desc, y_policy_band_details_desc,

a_policy_band_details_desc, b_policy_band_details_desc, c_policy_band_details_desc,

d_policy_band_details_desc, e_policy_band_details_desc, f_policy_band_details_desc,

g_policy_band_details_desc, h_policy_band_details_desc

FROM sri_policy.dbo.vw_band_info

WHERE policy_id = #page.policy_id#

AND rate_id = #individuals.rate_id#

</cfquery>

<td width="10%" class="xsmall_bold">Applicant Name</td>

<cfif band_header.x_policy_band_details_desc IS NOT ""><td width="10%" class="xsmall_bold">#band_header.x_policy_band_details_desc#</td></cfif>

<cfif band_header.y_policy_band_details_desc IS NOT ""><td width="10%" class="xsmall_bold">#band_header.y_policy_band_details_desc#</td></cfif>

<cfif band_header.a_policy_band_details_desc IS NOT ""><td width="10%" class="xsmall_bold">#band_header.a_policy_band_details_desc#</td></cfif>

<cfif band_header.b_policy_band_details_desc IS NOT ""><td width="10%" class="xsmall_bold">#band_header.b_policy_band_details_desc#</td></cfif>

<cfif band_header.c_policy_band_details_desc IS NOT ""><td width="10%" class="xsmall_bold">#band_header.c_policy_band_details_desc#</td></cfif>

<cfif band_header.d_policy_band_details_desc IS NOT ""><td width="10%" class="xsmall_bold">#band_header.d_policy_band_details_desc#</td></cfif>

<cfif band_header.e_policy_band_details_desc IS NOT ""><td width="10%" class="xsmall_bold">#band_header.e_policy_band_details_desc#</td></cfif>

<cfif band_header.f_policy_band_details_desc IS NOT ""><td width="10%" class="xsmall_bold">#band_header.f_policy_band_details_desc#</td></cfif>

<cfif band_header.g_policy_band_details_desc IS NOT ""><td width="10%" class="xsmall_bold">#band_header.g_policy_band_details_desc#</td></cfif>

<cfif band_header.h_policy_band_details_desc IS NOT ""><td width="10%" class="xsmall_bold">#band_header.h_policy_band_details_desc#</td></cfif>

</tr>

</table>

</td>

</tr>

<tr>

<td colspan="5" valign="top">

<table width="95%" border="0" cellpadding="0" cellspacing="0">

 <cfquery name="band_info" datasource="sri_online_insurance">
   SELECT policy_id, rate_id, x_band_desc, y_band_desc, a_band_desc, b_band_desc, c_band_desc,
   d_band_desc, e_band_desc, f_band_desc, g_band_desc, h_band_desc
   FROM sri_policy.dbo.vw_band_info
   WHERE policy_id = #page.policy_id#
   AND rate_id = #individuals.rate_id#
   </cfquery>
   <tr>
   <td width="10%" class="xsmall">#individuals.insured_fname# #individuals.insured_lname#</td>
   <cfif band_info.x_band_desc IS NOT ""><td width="10%" class="xsmall">#band_info.x_band_desc#<td></cfif>
   <cfif band_info.y_band_desc IS NOT ""><td width="10%" class="xsmall">#band_info.y_band_desc#</td></cfif>
   <cfif band_info.a_band_desc IS NOT ""><td width="10%" class="xsmall">#band_info.a_band_desc#</td></cfif>
   <cfif band_info.b_band_desc IS NOT ""><td width="10%" class="xsmall">#band_info.b_band_desc#</td></cfif>
   <cfif band_info.c_band_desc IS NOT ""><td width="10%" class="xsmall">#band_info.c_band_desc#</td></cfif>
   <cfif band_info.d_band_desc IS NOT ""><td width="10%" class="xsmall">#band_info.d_band_desc#</td></cfif>
   <cfif band_info.e_band_desc IS NOT ""><td width="10%" class="xsmall">#band_info.e_band_desc#</td></cfif>
   <cfif band_info.f_band_desc IS NOT ""><td width="10%" class="xsmall">#band_info.f_band_desc#</td></cfif>
   <cfif band_info.g_band_desc IS NOT ""><td width="10%" class="xsmall">#band_info.g_band_desc#</td></cfif>
   <cfif band_info.h_band_desc IS NOT ""><td width="10%" class="xsmall">#band_info.h_band_desc#</td></cfif>
   </tr>
 
   </table>
   </td>
   </tr>
 
   <tr><td colspan="3"><br></td></tr>
   <tr><td colspan="3" class="xsmall_bold">To confirm coverage and benefits, contact SRI Claims at:</td><td colspan="2" class="xsmall_bold">SRI Assist must be contacted:</td></tr>
   <tr><td colspan="3" class="xsmall">If in the United States or Canada: 1-800-335-0477</td><td colspan="2" class="xsmall">As soon as non-emergency hospitalization is recommended.</td></tr>
   <tr><td colspan="3" class="xsmall">If outside the United States or Canada (collect): 1-317-575-2656</td><td colspan="2" class="xsmall">Within 48 hours of the first working day following an emergency admission.</td></tr>
   <tr><td colspan="3" class="xsmall_bold">For emergency evac, repatriation, and assistance services:</td><td colspan="2" class="xsmall">When your physician recommends any surgery including outpatient.</td></tr>
   <tr><td colspan="3" class="xsmall">If in the United States or Canada: 1-800-690-6295</td><td colspan="2">&nbsp;</td></tr>
   <tr><td colspan="3" class="xsmall">If outside the United States or Canada (collect): 0-317-818-2808</td><td colspan="2">&nbsp;</td></tr>
   </table>
   </tr>
   </td>
   </table> 
   </td>
   </tr>
   <tr><td colspan="2"><br class="new_page"></td></tr>
   </cfoutput>

@IndyBauthorDec 16.2003 — #h

@IndyBauthorDec 17.2003 — #Anyone have ideas?

@Crash_BetaJun 10.2005 — #What if u wanted to loop thru folders and Dynamicly add PDF files to a generated page, with check boxes for selective printing ,. pelase help

Also in #JavaScript _↴

IE says 11 others say 10 Eval out functions?Need to cycle images daily.

Success!

Help @IndyB spread the word by sharing this article on Twitter...

Tweet This

Print selected items on a page

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Print selected items on a page

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴