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

Question

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.

Do you want to print just the form, or the entire page? – Cloud SME Nov 20 '13 at 16:30 — Cloud SME, Nov 20 '13 at 16:30
sorry i forgot to mention that, i want to print the form. – user2962142 Nov 20 '13 at 16:31 — user2962142, Nov 20 '13 at 16:31
This has nothing to do with asp.net mvc. – ataravati Nov 20 '13 at 19:28 — ataravati, Nov 20 '13 at 19:28

score 56 · Accepted Answer · edited Mar 19 '21 at 12:52

56

Print the 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 the 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();
    }
</script>

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

edited Mar 19 '21 at 12:52

Minasie Shibeshi

350
2
16

answered Nov 20 '13 at 16:31

Murali Murugesan

21,923
17
67
118

where im supposed to place the function ? – user2962142 Nov 20 '13 at 16:38
thanks but it does nothing when ever i click the button, any idea ? – user2962142 Nov 20 '13 at 16:54
Ya thanks it worked before the last update, just more couple questions, can i hide the header and footer (page number and date)? and the text align keep changes to left by itself, any idea ? – user2962142 Nov 20 '13 at 17:14
find it in DOM and hide using their ids. like `document.getElementById('footer).style.display=none` then call print – Murali Murugesan Nov 20 '13 at 17:15
well i couldnt do that but thanks anyway, at least its printing – user2962142 Nov 20 '13 at 17:30
Great answer. Just what I was looking for. Here's a working codepen http://codepen.io/martinkrulltott/pen/vObppZ – Martin Aug 06 '15 at 00:27
Hi, Do we have any way to verify, whether the content has loaded completely in that DIV ? – Nanda Kishore Allu Nov 19 '20 at 12:34
@NandaKishoreAllu you could validate if it has any child elements like `if ($("#urdivId").html().length > 0) or .text().length` – Murali Murugesan Nov 19 '20 at 15:49

score 3 · Answer 2 · edited Jun 09 '16 at 05:38

3

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.

edited Jun 09 '16 at 05:38

cocogorilla

1,775
12
36

answered Jun 09 '16 at 04:29

Vin

31
1

please check this [URL](http://stackoverflow.com/help) there are to lift your quality content up – Willie Cheng Jun 09 '16 at 04:35
TS want to print the form. not the page. – Els den Iep Nov 20 '18 at 17:52

score 1 · Answer 3 · answered Nov 20 '13 at 16:32

1

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();
     });
});

answered Nov 20 '13 at 16:32

Cloud SME

10,111
3
51
90

i created a javascript and placed the code and added the but nothing happens when i click it – user2962142 Nov 20 '13 at 16:45
This is using jQuery. Have you included jQuery? – Cloud SME Nov 20 '13 at 16:46
I have put together a jsFiddle to show it working. Notice how it is including jQuery 1.8.3: http://jsfiddle.net/LP8VJ/ – Cloud SME Nov 20 '13 at 16:48
Nope sorry, im pretty new how can i do that ? – user2962142 Nov 20 '13 at 16:50
There are no jquery tags on this page. So a jquery solution is, IMO, invalid. Not to mention this is trivial to do without including a third party package. – Liam Mar 02 '22 at 10:50

score 0 · Answer 4 · answered Mar 02 '22 at 10:55

As well as the above there are a couple of other approches you can take here:

<a href="Javascript:window.print();">Print</a>

and to not include any JS in your HTML:

const el = document.getElementById("aTag");
el.addEventListener("click", () => { window.print();});

<a id="aTag">print</a>

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

4 Answers4

Linked