Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Help please: Creating a printer friendly page from a form

Reply
Thread Tools

Help please: Creating a printer friendly page from a form

 
 
tommy
Guest
Posts: n/a
 
      10-10-2003
Newbie to the group.....hope you guys can help.

I need to be able to have a button at the bottom of a form page (like the
submit & reset buttons) to provide the user with a printer friendly version
of the form that he/she has just completed. It also needs to be submitted
in the usual way via email. I need to add a couple of extra items to this
printed version for someone to sign.

Any ideas how I can go about such a task? Is it possible?

Printing the screen is not an option as it looks nowhere near professional
and doesnt fit on one sheet of A4.

Thanks in advance of any help and advice..

http://www.velocityreviews.com/forums/(E-Mail Removed)





 
Reply With Quote
 
 
 
 
Jeff North
Guest
Posts: n/a
 
      10-10-2003
On Fri, 10 Oct 2003 12:15:49 +0000 (UTC), in comp.lang.javascript
"tommy" <(E-Mail Removed)> wrote:

>| Newbie to the group.....hope you guys can help.
>|
>| I need to be able to have a button at the bottom of a form page (like the
>| submit & reset buttons) to provide the user with a printer friendly version
>| of the form that he/she has just completed. It also needs to be submitted
>| in the usual way via email. I need to add a couple of extra items to this
>| printed version for someone to sign.
>|
>| Any ideas how I can go about such a task? Is it possible?
>|
>| Printing the screen is not an option as it looks nowhere near professional
>| and doesnt fit on one sheet of A4.
>|
>| Thanks in advance of any help and advice..
>|
>| (E-Mail Removed)


Sounds like a job for CSS. Note the @media styles.
-----------------------------
<html>
<head>
<style>
@media screen {
.noPrint {
background: #000000;
border: 2px solid #00FFFF;
color: #00FFFF;
display: ;
font-size: 20px;
margin: 10px 10px;
padding: 10px 10px;
}

input, textarea {
border: 2px dotted #FF0000;
}
}
@media print {
input, textarea {
border: 0px none;
font-family: monospace;
overflow: visible;
width: 100%;
}

p {
font-family: fantasy;
font-size: 20px;
font-style: italic;
font-weight: bold;
}

..noPrint {
display: none;
}
}
</style>
</head>
<body>
<P class='noPrint'>This is some text that will not be printed.</P>
<P>Input your name : <INPUT name="section" type="text" size="20"
maxlength="100" value="the quick brown fox jumps over the lazy dog"
/></P>
<P>Enter some large amounts of text here:<br />
<textarea name="tReject" cols="60" rows="5">
Pellentesque porttitor. Sed vestibulum, nulla eu euismod consectetuer,
magna dolor commodo sem, id nonummy erat ipsum a nulla. Fusce laoreet
magna nec sem. Proin sagittis odio vitae odio. Suspendisse potenti.
Mauris sit amet lacus. Maecenas quam. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Morbi mauris tortor, dignissim sit amet, elementum quis, mattis at,
quam. Phasellus varius orci. Pellentesque venenatis, diam et suscipit
porttitor, mi massa porta tortor, a dignissim ante neque quis massa.
</textarea>
</body>
</html>
-----------------------------
---------------------------------------------------------------
(E-Mail Removed) : Remove your pants to reply
---------------------------------------------------------------
 
Reply With Quote
 
 
 
 
Ivo
Guest
Posts: n/a
 
      10-10-2003
"tommy" <(E-Mail Removed)> wrote
> I need to be able to have a button at the bottom of a form page (like the
> submit & reset buttons) to provide the user with a printer friendly version
> of the form that he/she has just completed.


Depending on what the form is about, if it is not submitted, nothing
is completely completed.

>It also needs to be submitted


Does the button say "Print and Submit"?
That is asking for trouble I think. They are very different actions,
one navigating to a new page, the other stepping through a series of
dialog boxes before sending the current page to a printer. Consider to
have your users print the resulting page with their submitted info.

> in the usual way via email.


The usual way is to a serverside script that does something with the
name-value pairs of the form form elements. You may have seen forms
with action="mailto:some@email" but this is generally very bad
practice! A link to a page with more information will be posted
soon...

> I need to add a couple of extra items to this
> printed version for someone to sign.


Items that are not onscreen, but only on paper?
Most browsers recognize the media attribute that you can add to a css
stylesheet to specify 'print' and some other values for auraul
browsers etc.
Like so:
<style type='text/css'>
..onlyprint{display:none;}
</style>
<style type='text/css' media='print'>
..onlyprint{display:block;}
..dontprint{display:none;}
</style>
<div>This will print.</div>
<div class='dontprint'>This will not.</div>
<div class='onlyprint'>Print! Please!</div>
<input type='button' onclick='window.print();' class='dontprint'
value=' Print '>

Not tested throughout, but should work.
HTH
Ivo
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Hotwired Printer Friendly Page Beavis ASP .Net 1 12-13-2006 04:25 PM
How to make a Printer friendly page in ASP.Net Yog ASP .Net 0 03-27-2006 02:25 PM
Printer Friendly Page =?Utf-8?B?SmltIEg=?= ASP .Net 3 07-01-2005 12:59 PM
Please help - how to create a Printer Friendly web page... =?Utf-8?B?VGlnZ2Vy?= ASP .Net 2 11-10-2004 01:15 PM
implementing a Printer Friendly .aspx Page John Klucker ASP .Net 1 08-15-2003 10:54 PM



Advertisments