Solved

checkbox print

Posted on 2010-08-28
13
377 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
  • 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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
using web browser with BING 40 86
Javascript - output csv file 18 19
Hidden Field Value 10 34
Why don't I see this table in EDMX file? 2 20
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

758 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

22 Experts available now in Live!

Get 1:1 Help Now