Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Print only selected items on a page

    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>

  • #2
    New Coder
    Join Date
    Dec 2003
    Location
    At work...still
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Why?
    Ok, but Why?

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Sounds good to me.
    Last edited by adios; 12-17-2003 at 06:09 PM.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts

    try this

    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.

  • #5
    New Coder
    Join Date
    Dec 2003
    Location
    At work...still
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    That is sweet Glenn!
    Why?
    Ok, but Why?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •