Need help printing a form

**Jim Weinberg** · 03-25-2016, 07:19 PM

I need some help printing a form. The whole form, not just the data. I can't use window.print() as the form needs to be scaled before printing. I found a small javascript routine that works, but I'd like a bit more control (i.e. setting the output page type and size, etc.). The way this is written, I don't know how to modify it. Hopefully, one of the javascript experts can assist. The routine is:

Code:

<script>
/*
This script is written by Eric (Webcrawl@usa.net)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

function printit(){  
if (window.print) {
    window.print() ;  
} else {
    var WebBrowser = '<object id="WebBrowser1" width=0 height=0 classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
    WebBrowser1.ExecWB(6, 1);//Use a 1 vs. a 2 for a prompting dialog box    WebBrowser1.outerHTML = "";  
}
}
</script>

Thanks.

**jscheuer1** · 03-26-2016, 04:46 AM

Although, depending upon the specific circumstances (which you haven't supplied), it has been my experience that javascript is sometimes the best, or even the only way to do something like this, MOST OF THE TIME IT'S NOT. Usually the best approach is a print specific stylesheet. Here's a simple example:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
@media print {
	div {display: none;}
	div#formcontainer {display: block;}
}
</style>
</head>
<body>
<div>
Hi there!
</div>
<div id="formcontainer">
<div>Hello!</div>
<form action="#">
<label>Name: <input type="text" name="name"></label><br>
<select name="choices">
<option value="">Select a Choice</option>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>

Try it out, print it, you will see that only the form (including any values typed/selected in it) is printed. Notice the @media print selector. All the rules inside it will apply only when the page us printed. In this case only the form will be printed. Within that selector area, you can style the form in any way you like for printing. You can add classes and any other selectors to the page and/or form in order to ensure the printed output is as close as possible to desired. Be aware, browsers can override any styles you might have, but generally will not. And, since the same is true of javascript, and because more folks will be without javascript by default than will be without style by default, style is the safer approach. Also bear in mind that the precise output isn't as essential as is the content - in virtually all cases the content will be printed, in most cases, exactly as specified.

If you have any questions, feel free to ask. If you want more specific help though, please supply your code or a link to the page on your site that shows the problem/issue(s) you're working on with regards to this in detail.

**Jim Weinberg** · 03-26-2016, 01:42 PM

Hi John.

Thanks for the reply. I looked over your code and understand what your saying about style vs javascript. I certainly could modify my code to be of the form your recommending. That said, I tried your example in three different browsers and none of them printed the form or opened a print menu. Not sure what's wrong. Any ideas?

Jim

**jscheuer1** · 03-26-2016, 03:53 PM

Well, you just print the page in the normal manner. The style doesn't cause the page to print. You can use the the browser's print feature. Or, if you want a print button, then you can use javascript:

Code:

<input type="button" value="Print" onclick="window.print()">

All the style does is ensure that, when the page is printed, only the form gets printed, regardless of how the page is printed. If you want users to have a print button other than that provided by the browser, then javascript is the only choice. What I thought was the main issue was printing the form and only the form, that's what I was addressing with the style. Perhaps I misunderstood the question or saw only one part of it.

**Jim Weinberg** · 03-26-2016, 07:52 PM

Sorry about that, John. Sometimes I'm just dense. I'm going to modify my code to use the style sheet approach. If it works as well as your example, I'm home free.

Many thanks.
Jim

**Jim Weinberg** · 03-26-2016, 10:40 PM

Hi John.

Things are working good now. The only thing is, I need to scale the form down to 80% before it goes to the printer. Is that doable with CSS? I've looked around, but can't find anything that would act on the whole form.

Jim

**jscheuer1** · 03-27-2016, 02:15 AM

Yes but it could get complicated (not necessarily though). Browsers do offer the user the option to scale (both when viewing content, and while printing it), so perhaps you leave that to the user.

If you do want to try using css, the most obvious thing to try would be the font-size property. Like maybe (within the @media print block):

Code:

form {font-size: 80%;}

But that might not be enough. You might actually need to go lower, like 60%. Or 80% might be fine, but you may need to also specify some widths and heights for individual form elements and perhaps the overall form itself in order to get things to come out the way you want. Em units might work well for that (specifying dimensions) - an em is supposed to be roughly the width of a letter (though in my experience is only proportional to the size of a letter in some way - trial and error often needed here), so scales well to different % font sizes. But, fixed units (px or in) may work as well or better for specifying print dimensions.

In any case, the basic concept is that you are making a print stylesheet. The page's main stylesheet (if any) will also be used. However, anything in the print stylesheet that directly contradicts the page's main stylesheet will have precedence when printing. Likewise, anything in the print stylesheet that modifies something from the default stylesheet will take affect while printing. Style is the main thing (and the only real modern approach) that determines how individual things look. So, one way or another, it can be used to get the result you are after. The trick is generally to use as few rules as possible to achieve the desired result. You don't have to be perfect in that though, a few extra rules won't kill anyone.

If you want specific help, we would need to see the page and all current styles, print and otherwise. Best would be a link to the page. But, that's only needed of you want specific help.

**Jim Weinberg** · 03-27-2016, 06:35 PM

Hi John. Things are definitely looking better. I played around with the "width" and "font-size-adjust" and gotten it pretty close to what I want. Think it's time to shoot the engineer and go to production .... almost.

The form actually has 4 sections. The first and fourth are required (I ensure this in my scripts). The second and third, however, are optional. I would prefer to not have them printed if their fields (first field is the indicator) are blank. I could replace the "window.print" on the submit/print button with a routine to check the indicator fields, but I'm not sure how to conditionally send them to the printer.

Any suggestions?

Thanks,
Jim

**jscheuer1** · 03-28-2016, 03:24 PM

CSS might be able to do this, but I'm thinking not as you say section(s), which implies headings of some sort like label elements or just div or p that tell you what section it is. If not, you can set empty elements to display none (once again, in the @media print section - you might want to also use a parent selector if only certain ones of the empty inputs should not be printed):

Code:

input[value=''] {display: none;}

But if there are, as I say labels or other demarcating elements, text, just instructions, whatever like that in the sections that you don't want printed, then you would need javascript.

You may even need to add some elements. And I'm wondering if your page already uses jQuery, as that would make coding it easier. In any case I would want to see the page before making specific recommendations.

That said, generally what you would do is make up your own print function that uses window.print() after checking and making sure things are how you want. From what you say, let's say each section you want has a div around it with an id. Sections 2 and 3 are "section2" and "section3", so, the code could look like so:

Code:

function myPrint(){
	var s2 = document.getElementById('section2'), s3 = document.getElementById('section3'),
	i2 = s2.getElementsByTagName('input')[0].value, i3 = s3.getElementsByTagName('input')[0].value,
	r = /^\s+|\s+$/g, t = /[\D\d]{3,}/; // r strips leading and trailing white space, t tests for 3 or more remaining ordinary characters
	s2.style.display = t.test(i2.replace(r, ''))? '' : 'none';
	s3.style.display = t.test(i3.replace(r, ''))? '' : 'none';
	window.print();
}

This assumes you are using the button to print the page as I mentioned before. Now, with this code accessible to that button, change it to:

Code:

<input type="button" value="Print" onclick="myPrint()">

That may be less than ideal though, because after that, those sections will no longer be able to be seen until the page is refreshed. So, instead of determining what display property should be used, we may want to activate various alternate print stylesheets upon the basis of this information. That would allow a person to go back later, fill in sections 2 and/or 3 and then print and have that work out.

At the same time, requiring a refresh before that could happen might be a good thing.

If you want more help, please post a link to the page on your site that contains the problematic code.

**Jim Weinberg** · 03-29-2016, 01:02 PM

Hi John.

Your input was great. Got me thinking. What I did was write up a routine that switches a div's display value between "none" and "block". I then enclosed each section in a div and set the on-click to point to my routine. When the user clicks the print button, the routine checks the indicator field of each section and if it's blank, set the display value to "none". After the window.print() is executed, it switches the display value back to "block" so the form looks the same as it did.

Thanks for all your help. Best regards,
Jim

Thread: Need help printing a form

Thread Tools

Search Thread

Need help printing a form

Similar Threads

Submitting a form and printing it at the same time

CSS and Printing!

about printing

Printing from web page.

Looking for printing portal

Bookmarks

Bookmarks

Posting Permissions