Click here to Skip to main content
15,436,002 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
hello
I am trying to print the pagebut the print button is also getting print on hard copy
how to hide that button.I am using the following javascript code. anyone can pls help me?

JavaScript
<script>
function printpage()
  {
  window.print()
  }
</script>
</head>
<body>

<input type="button" value="Print this page" onclick="printpage()">

</body>
Posted
Updated 3-Dec-19 1:10am

HTML
<style type="text/css">
@media print {
    #printbtn {
        display :  none;
    }
}
</style>
<input id ="printbtn" type="button" value="Print this page" onclick="window.print();" >
 
Share this answer
 
v3
Hi,

the solution is very simple:

1. Give your print button an ID:
HTML
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>


2. Adjust your script the way that it hides the button before calling window.print():
JavaScript
<script type="text/javascript">
    function printpage() {
        //Get the print button and put it into a variable
        var printButton = document.getElementById("printpagebutton");
        //Set the print button visibility to 'hidden' 
        printButton.style.visibility = 'hidden';
        //Print the page content
        window.print()
        //Set the print button to 'visible' again 
        //[Delete this line if you want it to stay hidden after printing]
        printButton.style.visibility = 'visible';
    }
</script>


Fast 'n' nice.

cheers,
Marco
 
Share this answer
 
Comments
A. Najafzadeh 2-Aug-14 23:07pm    
Thanks. my rate is 5.
Marco Bertschi 3-Aug-14 4:48am    
You're welcome.
Neetu Pandita 3-Feb-18 2:48am    
Nice it worked
Hi rgboss238,
Here is a code how can you hide a print button while printing


XML
<head runat="server">
    <title>Print Page</title>
    <script type="text/javascript">
        function print_page() {
            var ButtonControl = document.getElementById("btnprint");
            ButtonControl.style.visibility = "hidden";
            window.print();
        }
    </script>
</head>

<body>
   
    <div>
    <strong>Hello world</strong><br/>
    <input type="button" id="btnprint" value="Print this Page" onclick="print_page()" />

    </div>
   
</body>
 
Share this answer
 
v2
Comments
Marco Bertschi 11-May-13 7:38am     CRLF
It is nice, but it unfortunately keeps the button hidden after printing since you do not set the button' visibility to visible after printing. cheers, Marco
arunrv 13-May-13 1:20am     CRLF
visible Button after print like this ButtonControl.style.visibility = "hidden"; window.print(); ButtonControl.style.visibility = "visible";
Member 15689994 28-Jun-22 7:45am    
Thanks for sharing.
Use CSS @media print or a print stylesheet to hide the button when it is printed. That way it will be hidden on the printout whether the button is used to print or not.

See http://reference.sitepoint.com/css/at-media[^] and http://reference.sitepoint.com/html/link/media[^] for details.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900