Help please: Creating a printer friendly page from a form

Discussion in 'Javascript' started by tommy, Oct 10, 2003.

  1. tommy

    tommy Guest

    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, Oct 10, 2003
    #1
    1. Advertising

  2. tommy

    Jeff North Guest

    On Fri, 10 Oct 2003 12:15:49 +0000 (UTC), in comp.lang.javascript
    "tommy" <> 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..
    >|
    >|


    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>
    -----------------------------
    ---------------------------------------------------------------
    : Remove your pants to reply
    ---------------------------------------------------------------
    Jeff North, Oct 10, 2003
    #2
    1. Advertising

  3. tommy

    Ivo Guest

    "tommy" <> 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
    Ivo, Oct 10, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Klucker

    implementing a Printer Friendly .aspx Page

    John Klucker, Aug 15, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    387
    John Timney \(Microsoft MVP\)
    Aug 15, 2003
  2. =?Utf-8?B?VGlnZ2Vy?=
    Replies:
    2
    Views:
    463
    =?Utf-8?B?SmVyZW15IERhdmlz?=
    Nov 10, 2004
  3. =?Utf-8?B?SmltIEg=?=

    Printer Friendly Page

    =?Utf-8?B?SmltIEg=?=, Jul 1, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    444
  4. Yog
    Replies:
    0
    Views:
    446
  5. Beavis

    Hotwired Printer Friendly Page

    Beavis, Dec 6, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    284
    Beavis
    Dec 13, 2006
Loading...

Share This Page