Help please: Creating a printer friendly page from a form

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..

tommy@NOSPAM121netdesign.com

On Fri, 10 Oct 2003 12:15:49 +0000 (UTC), in comp.lang.javascript
"tommy" <tommylee01@btinternet.com> wrote:
[color=blue]
>| 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..
>|
>| tommy@NOSPAM121netdesign.com[/color]

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>
-----------------------------
---------------------------------------------------------------
jnorth@yourpantsbigpond.net.au : Remove your pants to reply
---------------------------------------------------------------

"tommy" <tommylee01@btinternet.com> wrote[color=blue]
> 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.[/color]

Depending on what the form is about, if it is not submitted, nothing
is completely completed.
[color=blue]
>It also needs to be submitted[/color]

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.
[color=blue]
> in the usual way via email.[/color]

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...
[color=blue]
> I need to add a couple of extra items to this
> printed version for someone to sign.[/color]

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

Help please: Creating a printer friendly page from a form

re: Help please: Creating a printer friendly page from a form

re: Help please: Creating a printer friendly page from a form

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about