Solved

checkbox print

Posted on 2010-08-28
13
383 Views
Last Modified: 2012-05-10
I have implemented this javascript into my page the purpose is to display a printer friendly page with the selected  user options, the page as now displays wherever is on the real screen even the checkboxes, but i want to only display those fields which checkbox has been checked,,, how would i do that?
// I need only those fields with checkbox checked


//Generating Pop-up Print Preview page
function getPrint(print_area) {
    //Creating new page
    var pp = window.open();
    //Adding HTML opening tag with <HEAD> … </HEAD> portion 
    pp.document.writeln('<HTML><HEAD><title>Print Preview</title>')
    pp.document.writeln('<LINK href=Styles.css type="text/css" rel="stylesheet">')
    pp.document.writeln('<LINK href=PrintStyle.css ' +
                        'type="text/css" rel="stylesheet" media="print">')
    pp.document.writeln('<base target="_self"></HEAD>')

    //Adding Body Tag
    pp.document.writeln('<body MS_POSITIONING="GridLayout" bottomMargin="0"');
    pp.document.writeln(' leftMargin="0" topMargin="0" rightMargin="0">');
    //Adding form Tag
    pp.document.writeln('<form method="post">');

    //Creating two buttons Print and Close within a HTML table
    pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right>');
    pp.document.writeln('<INPUT ID="PRINT" type="button" value="Print" ');
    pp.document.writeln('onclick="javascript:location.reload(true);window.print();">');
    pp.document.writeln('<INPUT ID="CLOSE" type="button" ' +
                        'value="Close" onclick="window.close();">');
    pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');

    //Writing print area of the calling page
    pp.document.writeln(document.getElementById(print_area).innerHTML);
    //Ending Tag of </form>, </body> and </HTML>
    pp.document.writeln('</form></body></HTML>');
}

Open in new window

0
Comment
Question by:TonyReba
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
13 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 33549429
You could add a function to return the checked items values then change line 30 to:

pp.document.writeln(GetCheckedItems(print_area));
function GetCheckedValues(print_area) {
        var checkedItems = "" 
	var elem = document.getElementById(print_area).elements;
	for(var i = 0; i < elem.length; i++) {        
		if(elem[i].type == "checkbox") {
		    if (elem[i].checked) {
                         checkedItems += elem[i].value + "<br />";         
		    }
		    
		}
	}
        return checkedItems;

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 33549432
Correction:

pp.document.writeln(GetCheckedValues(print_area));
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33551171
Is tat it?
0
Independent Software Vendors: 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!

 
LVL 38

Expert Comment

by:Tom Beck
ID: 33551211
Is that what you were looking for?
I just took a guess as to what print_area represents. The javascript code demonstrates a way to find all the checked checkboxes and add a list of their values to the print pop up.
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33551652
I get length is null or non an object error
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 33552625
If you used my sample code as is, it does not surprise me that you are getting errors. It's generic. I can only guess at what your markup look like. You have only posted the part that creates the pop up. If you want additional help you will need to provide enough code to allow me to understand how the checkboxes are rendered and what "print_area" is.
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33555606
Yes please see  my aspx page...

<script src="Script.js" type="text/javascript"></script>
     <script type="text/javascript">

         // Let's use a lowercase function name to keep with JavaScript conventions

         function selectAll(invoker) {

             // Since ASP.NET checkboxes are really HTML input elements
             //  let's get all the inputs 
             var inputElements = document.getElementsByTagName('input');
             for (var i = 0; i < inputElements.length; i++) {

                 var myElement = inputElements[i];
                 // Filter through the input types looking for checkboxes
                 if (myElement.type === "checkbox") {

                     // Use the invoker (our calling element) as the reference 
                     //  for our checkbox status
                     myElement.checked = invoker.checked;
                 }

             }

         }  

     </script>
   <br />
    <div class="NoDisplay" 
    style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none">
    <table cellpadding="0" cellspacing="0" style="border-right: #000000 thin solid; border-top: #000000 thin solid;
                                    border-left: #000000 thin solid; border-bottom: #000000 thin solid; background-color: #FFFFFF; border-width: 1px;"
                                    width="100%" align="center">
    <tr>
        <td colspan="2" style="width: 100%; height: 22px; text-align: left;">
            <span style="font-size: 10pt; font-family:Arial, Helvetica, sans-serif;">
            <strong style="width: 100%; text-align: center">&nbsp;Search Options</strong></span></td>
    </tr>
    <tr style="font-size: 12pt">
        <td style="width: 34%; text-align: left; height: 24px;">
                                            <span id="providerLabel" style="font-family:Arial, Helvetica, sans-serif;font-size:10pt;">&nbsp;Provider Name:</span>
            <asp:TextBox ID="providerTextBox" runat="server"></asp:TextBox>
            <span style="font-size: 10pt">&nbsp;&nbsp; (All or part of name)</span></td>
        <td style="width: 30%; height: 24px; text-align: left;">
            
        </td>
    </tr>
    <tr>
        <td style="width: 34%; text-align: left; height: 20px;">
            <span id="specialtyLabel" 
            style="font-family:Arial, Helvetica, sans-serif;font-size:10pt; text-align: left;">&nbsp;Specialty:</span>
            <asp:DropDownList ID="specialityDropDown" runat="server" 
                DataSourceID="AccessDataSource1" DataTextField="Specialty" 
                DataValueField="Specialty"  AppendDataBoundItems="True">
           <asp:ListItem Selected="True"  Text="All" Value ="All">All</asp:ListItem>                   
            </asp:DropDownList>
        </td>
        <td style="width: 30%; height: 20px; text-align: left;">
            <asp:Button ID="searchButton" runat="server" Text="Search" />
        </td>
    </tr>
    <tr>
        <td style="width: 34%; text-align: left; height: 21px;">
            <span id="zipCodeLabel" style="font-family:Arial, Helvetica, sans-serif;font-size:10pt;">&nbsp;Zip Code:</span>
            <asp:TextBox ID="txtZipCode" runat="server"></asp:TextBox>
&nbsp;
            <asp:DropDownList ID="distanceDropDown"  runat="server">
                <asp:ListItem Selected="True" Value ="1000">Find Closest</asp:ListItem>
                <asp:ListItem Value ="10">Within 10 Miles</asp:ListItem>
                <asp:ListItem Value ="25">Within 25 Miles</asp:ListItem>
                <asp:ListItem Value ="50">Within 50 Miles</asp:ListItem>
                <asp:ListItem Value ="100">Within 100 Miles</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td style="width: 30%; height: 21px; text-align: left;">
            <asp:Button ID="showallButton" runat="server" Text="Show All" />
            <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
                DataFile="~/App_Data/Providers.mdb" 
                
                SelectCommand="SELECT DISTINCT [Specialty] FROM [tbl_Providers] ORDER BY [Specialty] ASC">
            </asp:AccessDataSource>
        </td>
    </tr>
    <tr>
        <td style="width: 34%; text-align: left; height: 21px;">
            &nbsp;</td>
        <td style="width: 30%; height: 21px; text-align: left;">
            &nbsp;</td>
    </tr>
</table>
    <br />
    </div> 
    <!--   ENDS NO-DISPLAY PRINT AREA--> 


    <div id="print_area">

    <asp:ListView ID="ListView1" runat="server"   DataSourceID="AccessDataSource2"  >

         <EmptyDataTemplate>
         <span></span>
        </EmptyDataTemplate>
    <GroupTemplate>
            <tr ID="itemPlaceholderContainer" runat="server">
                <td ID="itemPlaceholder" runat="server">
                </td>
            </tr>
        </GroupTemplate>
 
  <ItemTemplate>
        <br />
        <table id="TableItemTemplate"  runat= "server" class="itemTemplateClass">
     
 <tr>
    <td >
      <b>
            <asp:Label ID="Label1" runat="server" Text='<%# Eval("Last_Name") %>' />
            ,
             <asp:Label ID="Label2" runat="server" 
             Text='<%# Eval("First_Name") %>' />
             
               <asp:Label ID="Label3" runat="server" 
             Text='<%# Eval("Prof_Designation") %>' />
             </b>
             </td>
             </tr>
             <tr>
             <td>
                        <br/>
            <asp:Label ID="Label6" runat="server" Text='<%# Eval("Address") %>' />
            <br/>
            <asp:Label ID="Label7" runat="server" Text='<%# Eval("Address2") %>' />
           <br/>
            <asp:Label ID="Label8" runat="server" Text='<%# Eval("City") %>' />
            ,
            <asp:Label ID="Label9" runat="server" Text='<%# Eval("State") %>' />
            ,
            <asp:Label ID="Label10" runat="server" Text='<%# Eval("Zip") %>' />
           <br/>
            <asp:Label ID="Label11" runat="server" Text='<%# Eval("Phone") %>' />
            <br/>
                        <asp:CheckBox ID="CheckBoxPrintProvider" runat="server" Text="Print this Provider" />
            <asp:HyperLink ID="HyperLink1"  runat="server" Text="Click to See a Map" NavigateUrl='<%# "http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=" + Server.UrlEncode(Eval("Address").ToString) + "," + Server.UrlEncode(Eval("City").ToString) + "," + Server.UrlEncode(Eval("State").ToString) %>'   />                                             
            </td></tr>
            </table>
            <br />
        </ItemTemplate>

      <AlternatingItemTemplate>
      <table id="TableAlternativeItemTemplate"  runat= "server" class="alternateitemTemplateClass"   >
  <tr>
    <td >
      <b>
            <asp:Label ID="Label1" runat="server" Text='<%# Eval("Last_Name") %>' />
            ,
             <asp:Label ID="Label2" runat="server" 
             Text='<%# Eval("First_Name") %>' />
             
               <asp:Label ID="Label3" runat="server" 
             Text='<%# Eval("Prof_Designation") %>' />
             </b>
             </td>
             </tr>
             <tr>
             <td>
            <asp:Label ID="Label4" runat="server" Text='<%# Eval("Specialty") %>' />
           
            <br/>
            <asp:Label ID="Label6" runat="server" Text='<%# Eval("Address") %>' />
            <br/>
            <asp:Label ID="Label7" runat="server" Text='<%# Eval("Address2") %>' />
           <br/>
            <asp:Label ID="Label8" runat="server" Text='<%# Eval("City") %>' />
            ,
            <asp:Label ID="Label9" runat="server" Text='<%# Eval("State") %>' />
            ,
            <asp:Label ID="Label10" runat="server" Text='<%# Eval("Zip") %>' />
           <br/>
            <asp:Label ID="Label11" runat="server" Text='<%# Eval("Phone") %>' />
            <br/>
                    
            <br />
            <asp:CheckBox ID="CheckBoxPrintProvider2" runat="server" Text="Print this Provider" />
            <asp:HyperLink ID="HyperLink2"  runat="server" Text="Click to See a Map" NavigateUrl='<%# "http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=" + Server.UrlEncode(Eval("Address").ToString) + "," + Server.UrlEncode(Eval("City").ToString) + "," + Server.UrlEncode(Eval("State").ToString) %>'   />
            </td>
            </tr>
            </table>
       </AlternatingItemTemplate>
   
   <LayoutTemplate>

   
             <table id="Table1"cellpadding="0" cellspacing="0" style="border-right: #000000 thin solid; border-top: #000000 thin solid;
                                    border-left: #000000 thin solid; border-bottom: #000000 thin solid; background-color: #FFFFFF; border-width: 1px;"
                                    width="100%" align="center" class="NoDisplay">
        <tr>
            <td class="style2">
                    <b>Matching Providers </b>
                   </td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style2">
                             Sort By: 
                                 <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Sort" CommandArgument="Last_Name">Name</asp:LinkButton>&nbsp;Sort 
                By:   
                                 <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Sort" CommandArgument="City">City</asp:LinkButton>
                <br />
            </td>
            <td>
      <asp:Button ID="btnPrint" runat="server" Text="Print Selected Providers" />
                   &nbsp;
                   <asp:CheckBox ID="chkSelectAll" runat="server" Text=" Select All For Printing" AutoPostBack="true" OnClick="selectAll(this)" />
                                    </td>
        </tr>
    </table>
    
                        <table ID="groupPlaceholderContainer" runat="server" border="1" 
                            style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
                            <tr ID="groupPlaceholder" runat="server">
                            </tr>
                        </table>
                                                
                    </td>
                </tr>
                <tr id="Tr2" runat="server">
                    <td id="Td2" runat="server" 
                        style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
                        <br />
                        <asp:DataPager ID="DataPager1" runat="server" PageSize="12">
                            <Fields>
                                <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
                                    ShowLastPageButton="True" />
                            </Fields>
                        </asp:DataPager>
                    </td>
                </tr>
            </table>
             
        </LayoutTemplate>
        
    </asp:ListView>
       
 
       <asp:AccessDataSource ID="AccessDataSource2" runat="server" 
        DataFile="~/App_Data/Providers.mdb" 
        
            SelectCommand="SELECT [ID], [Provider_Type], [Last_Name], [First_Name], [Prof_Designation], [Group_Business Name] AS Group_Business_Name, Specialty, [Specialty 2], [Address], [Address2], [City], [State], [Zip],[Phone] FROM [tbl_Providers]">
           
        </asp:AccessDataSource>
                
           <br />
       </div>

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 33558151
Ok, I see what you are doing now. I was picturing a series of check boxes and you were trying to print only the ones checked. Instead you have drop down selections, text boxes, check boxes, sort buttons, etc. to display variations on the information. Your script for printing the innerHTML of the print_area is not going to work. There are no short cuts for this. You need to keep track of the user's choices either by Session variables or hidden fields. Then when the user clicks the print button, you do a post back, retrieve only the information matching the selections, and return a new page in a pop up with a print friendly layout.
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33558337
Yes , that what I thought . Would you be so kind to give an starting point for me to start  the code needed? Thanks for your help
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 33559414
There are a few different ways approach this. The end goal is to create a simple page of static information that's printer friendly. You do this by building a new SQL SELECT statement from the current selections in the drop down lists, the currently displayed page, and the chosen sorting order. Then you retrieve the information fresh from the database and display it in a straightforward manner in the pop up. One easy way is to build a query string that calls a new aspx page server side that builds the page from the information provided in the query. The query could be built in advance and sent back with the main page each time a user changes their selections. The query could look something like this:
http://www.mywebsite.com/printerFriendly.aspx?dropdown1=<somevalue>&dropdown2=<somevalue>&sort=<somevalue>
A click on the print button would pop up the new window and call the url to fill the page. Upon retrieving the url, the code behind for the printerFriendy.aspx page retrieves the data using the values in the query, builds the table of information and returns it to the pop up window.
0
 
LVL 9

Author Comment

by:TonyReba
ID: 33559536
How about the checkboxes state, how do I read wich ones were checked?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 33560023
You could run the GetCheckedValues script I posted earlier and add the results to the query string before submitting the url.
0
 
LVL 9

Author Closing Comment

by:TonyReba
ID: 33564127
great
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

710 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