homepage Welcome to WebmasterWorld Guest from 54.166.66.204
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




msg:1470460
 1:03 pm on Jun 20, 2002 (gmt 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




msg:1470461
 11:05 pm on Jun 20, 2002 (gmt 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




msg:1470462
 10:16 am on Jun 21, 2002 (gmt 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)">

<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

tedster




msg:1470463
 12:08 pm on Jun 21, 2002 (gmt 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




msg:1470464
 12:28 pm on Jun 21, 2002 (gmt 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




msg:1470465
 12:49 pm on Jun 21, 2002 (gmt 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




msg:1470466
 1:11 pm on Jun 21, 2002 (gmt 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).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved