How can I insert a Print button that prints a form in a webpage

So, lets say I got a simple form inside a page like this:

<form style="text-align:center;">
    <p> STUFF </p>
</form>

I wanna add a button so when the user clicks on it the browser's Print dialog shows up, how can I do that?

Edit: I wanna print the form, not the page.

Answers


Print whole page

Try adding a button that calls window.print()

<input type="button" value="Print this page" onClick="window.print()">

Print a specific portion/container in a page

<div id="print-content">
 <form>

  <input type="button" onclick="printDiv('print-content')" value="print a div!"/>
</form>
</div>

then in HTML file add this script code

<script type="text/javascript">
    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        w=window.open();
        w.document.write(printContents);
        w.print();
        w.close();
    }

Refer Print <div id="printarea"></div> only?


What you need is the window.print():

<form style="text-align:center;">

  <p> STUFF </p>

  <a href="#" id="lnkPrint">Print</a>
</form>

Javascript:

$( document ).ready(function() {
    $('#lnkPrint').click(function()
     {
         window.print();
     });
});

To print with submit button, add this to your summit script:

<input type="button" value="Print this page" onClick="window.print()">

Keep in mind, this will only trigger whatever browser implemented print capabilities are available at the client.


Need Your Help

Can I copy a Git working copy onto another machine?

git git-svn

I am in the process of creating a Git working copy from our SVN server with 'git svn clone'. But this takes quite some time (we have > 20.000 revs and almost 10.000 files). I have some other mach...

Android OnItemClickListener not working

android listview listener

I'm using android 2.3.3. I set up a layout like,