Welcome to WebmasterWorld Guest from 54.198.134.104

This page requires javascript to function properly. It seems that your browser does not have Javascript enabled. Please enable Javascript and press the Reload/Refresh button on your browser.

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

Brownie

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

New User

joined:Apr 26, 2001
posts:35
votes: 0

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?

tedster

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

Senior Member

tedster is a WebmasterWorld Top Contributor of All Time

joined:May 26, 2000
posts:37301
votes: 0

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?

starway

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

Junior Member

joined:June 20, 2002
posts:115
votes: 0

Brownie,
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.open();
popup.document.write("<html><head></head><body onload='print()'>");
popup.document.write(elem);
popup.document.write("</body></html>");
popup.document.close();
}

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)">

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

good luck

tedster

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

Senior Member

joined:May 26, 2000
posts:37301
votes: 0

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?

Brownie

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

New User

joined:Apr 26, 2001
posts:35
votes: 0

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!

rewboss

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

Preferred Member

joined:June 7, 2002
posts:475
votes: 0

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.

starway

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

Junior Member

joined:June 20, 2002
posts:115
votes: 0

tedster,
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).