Print only selected items on a page

PushCode · 12-17-2003, 03:50 PM

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 CSS 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>

WillGibson · 12-17-2003, 05:55 PM

Doing this with JS maybe be a bit hard. I suppose you can add some DIV tags or give your TR's id setting and make use of InnerHtml. Pop a new window open and write its content using JS, transfer the InnerHtml values over to the new page that way.

It may be easier to do it server side (CF). Have your current page sumbit (to a new window), the server reads which checkboxes are on and maybe runs another query to pull the correct data. Give this new page a body onload event with JS to print and then close the window.

You may want to change your id and name to include recSet.CurrentRow just to make it easier to tell what's what.

That would be at about 5000 feet, as I haven't done CF in a while I dont have examples for you.

Good luck
Will

adios · 12-17-2003, 06:05 PM

Sounds good to me.

glenngv · 12-18-2003, 09:24 AM

IE only and have not tested this because I'm disconnected to our printer at the moment.

Code:

<html>
<head>
<title>Testing</title>
<style type="text/css">
@media print
{
.displayOnly {display: none;}
}
</style>
<script type="text/javascript">
  document.onbeforeprint = function(){
   var chks = document.form1.chk;
   if (chks.length){
     for (var i=0;i<chks.length;i++){
       if (!chks[i].checked) { 
	  document.getElementById("row"+chks[i].value).className="displayOnly";
          document.getElementById("row"+chks[i].value+"_1").className="displayOnly";
       }
     }  
   }
   else if (!chks.checked) {
     document.getElementById("row"+chks.value).className="displayOnly";
     document.getElementById("row"+chks.value+"_1").className="displayOnly";
   }
  }
  document.onafterprint = function(){
   var chks = document.form1.chk;
   if (chks.length){
     for (var i=0;i<chks.length;i++){
       if (!chks[i].checked){
	  document.getElementById("row"+chks[i].value).className="";
          document.getElementById("row"+chks[i].value+"_1").className="displayOnly";
       }
     }  
   }
   else if (!chks.checked) {
     document.getElementById("row"+chks.value).className="";
     document.getElementById("row"+chks.value+"_1").className="";
   }
  }
</script>
</head>
<form name="form1"> 
<tr> 
<table width="100" border="1" cellspacing="0" cellpadding="0"> 
<tr id="row1"> 
<td><input type="checkbox" name="chk" value="1"></td> 
<td>firt name</td> 
<td>middle name</td> 
<td>last name</td> 
</tr> 
<tr id="row1_1"> 
<td colspan="4">biography</td> 
</tr> 
<tr id="row2"> 
<td><input type="checkbox" name="chk" value="2"></td> 
<td>firt name 2</td> 
<td>middle name 2</td> 
<td>last name 2</td> 
</tr> 
<tr id="row2_1"> 
<td colspan="4">biography 2</td> 
</tr>
</table> 
</tr> 
<p> 
<input type="button" value="Print Cards" onclick="window.print()"> 
</form>
</body>
</html>

The ones in bold red text should be dynamically generated by the cold fusion code.

WillGibson · 12-18-2003, 04:21 PM

That is sweet Glenn!