Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Using Javascript to print a text field

Is it possible to print text from a form text field, using Javascript print



1:03 pm on Jun 20, 2002 (gmt 0)

10+ Year Member

I have a number of large case studies which I am sure, people will want to print for future reference. Naturally, they could just print the page, or I even thought of providing a text file for download.

However I thought it would be cool if I could provide the text in a form text field and print just the text (using a print button).

Can anyone point me in the right direction?


11:05 pm on Jun 20, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I'm not seeing the advantage to this, only the downside (extra coding, loss of formatting, the possibility that people would alter the content accidentally.)

Would you fill me in on what attracts you to this idea?


10:16 am on Jun 21, 2002 (gmt 0)

10+ Year Member

You can do it using this trick:

1.open a popup window
2. write there the value of a desired text box
3. open Print dialog automatically

Here's an example similar to the one I used once:

function printText(elem) {
popup = window.open('','popup','toolbar=no,menubar=no,width=200,height=150');
popup.document.write("<html><head></head><body onload='print()'>");

Then you should call it like this:
<form name=f1>
. . .
<input type=text name=t1>
<input type=button value="print it" onclick="printText(document.f1.t1.value)">

<textarea name=t2></textarea>
<input type=button value="print it" onclick="printText(document.f1.t2.value)">

Very simple and effective.
You can also print the entire form by looping through it's elements.

good luck


12:08 pm on Jun 21, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Very neat starway. Thanks for jumping in when this old guy was stuck and mostly just being critical.

I'm still curious about the advantages. Fill me in?


12:28 pm on Jun 21, 2002 (gmt 0)

10+ Year Member

Many thanks for the help!

In a previous revision of the site I am updating, I used a link to a 'printer friendly' page, but I wanted something that jumped out of the page to say 'hey print/download me!'. I think I may cause myself more trouble than its worth, but thanks to your help, I now have a few more options!


12:49 pm on Jun 21, 2002 (gmt 0)

10+ Year Member

In future, you'll be able to use CSS to hide certain parts of the document (e.g. navigational elements) from the printer. I've tried it myself, and it works on (as I recall) NS6 and IE5 (? -- it was a long time ago, I can't remember now).

All your elements you don't want printed you would give a class -- say, "noprint". You then create a simple (external) stylesheet with this rule:

.noprint { display: none; }

Save it as (say) "printstyles.css". Import it into the document with the following directive:

@import url(printstyles.css) print;

You can, similarly do the reverse: have the printer print a message that doesn't appear on the screen. Or specify a different font (san-serif fonts are easier to read on screen, serif fonts are easier to read on paper). And so on.


1:11 pm on Jun 21, 2002 (gmt 0)

10+ Year Member

The advantage seems to be that you can offer to print some predefined portions of page content. Nothing more than that. It can be rather user-friendly thing, of course if you don't make it too complicated and know where to stop.

It works in all browsers that understand print() function:
IE5+ (can't test in IE4), NN4.x, Mozilla/N6, Opera 6 (unfortunately, it wans't available before) on PC,
and IE5 and NN4.x on Mac (these were the only ones where it was tested).


Featured Threads

Hot Threads This Week

Hot Threads This Month