Print button for a form [Archive]

Click to See Complete Forum and Search --> : Print button for a form

rbudj

08-19-2003, 06:44 AM

I have searched hotscripts.com and this forum. Although there are basic print scripts found, they all seem to print the entire page of the site.

What I want to do is create an html form. Instead of the submit button, I just want a print button that will print ONLY the form with the elements populated and not the rest of the page. I am doing this simply so the visitor can input their informaiton with the keyboard instead of printing and filling it out on paper. Is this possible? Does anyone have a script?

Thanks a bunch :)

AdamBrill

08-19-2003, 07:23 AM

Hmm... This is a script I made a while back to print just some text. I ported it over so it will print all of the form fields. I had it print out the form element name and then the value... You can change it if you want it to do something different.

Fang

08-19-2003, 07:25 AM

You have to define a URL=http://www.w3.org/TR/REC-CSS2/media.html]media CSS[/URL] for printing:

@media print {
/* style sheet for print goes here */
div.notprinted {display:none;}
p.notprinted {diiplay:none;}
/* and the rest */

form#tobeprinted {display:block;}
}

It has to be more elaborate than this...

rbudj

08-19-2003, 07:48 AM

Thanks Adam. It works just as I need it to. Thanks a bunch for your time!!!!

Fang, Im not sure what you mean. I do not know javascript too well. Is your reply in addition to the file posted by Adam or is it totally different?

Thanks again guys!!!!

AdamBrill

08-19-2003, 07:56 AM

rbudj, Fang's way would be the CSS alternative to what I posted. It is quite a pain to set up since you have to tell everything that you don't want printed to have a style to not print. The benefit is that it will work for people without JS... However, since you are going to have a JS button to print the form, it really doesn't matter if you use JS for the whole thing...

Fang

08-19-2003, 10:14 AM

No pain no gain ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>media print example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

</style>
</head>
<body>
<span class="notprinted">
<div>visible but not printed</div>
</span>
<form action="#" id="tobeprinted">
<input type="text" value="some input" />
<button type="submit">submit</button>
</form>
<span class="notprinted">
<div>visible but not printed</div>
</span>
</body>
</html>

It's quite simple really!