Printing hidden Div tags with javascript variables. 1

samobellows · Oct 28, 2009

Hello, and thanks in advance for helping me out here.

the project i am working on is a web based form that basically takes information from a form, and among other things, generates a printer friendly version of the information on the form.

the user fills out the form, and when they click the "printer friendly version" button, the div tag that has the form in it stays visible, but the div tag that holds the printer friendly information which was hidden, is toggled to visible, and positioned on top of the form.

before the printer friendly div pops up, i generate the innerhtml with a javascript from the data in the web form, so that when the hidden "printer friendly" div becomes visible, the information in it is what the user entered from the form.

now, i need to print that printer friendly version, without printing the rest of the page.

things i've tried:

a straight up window.print will print the whole page,including banner adds and all that. i need just the "printerFriendly" div tag to print.

a CSS "@media print" came close, i got that to only print the div tag i wanted, but all of the javascript variables are lost, because this method reloads the page, and on a fresh load, the "printerFriendly" div tag is empty

i cannot use a window.open to accomplish this, due to client requesting no popups.

Any hints or suggestions to clear the way will be greatly appreciated, i hope this post isn't too much a wall of text. thanks again!

vicvirk · Oct 28, 2009

The media print should do the trick, don't know why it didn't work, but here's a quick example using it.

Note: I put this together in about 5 minutes, it does the trick, but not coded the best way possible.

Fill out the form and take focus off of it

Go to a print preview and you'll see the form is hidden and the info below is not.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Untitled</title>
	<script language="javascript" type="text/javascript">
		function z(a,b) {
			document.getElementById(a).innerHTML = document.getElementById(b).value;
		}
	</script>
	<style type="text/css" media="screen">
		#userForm { display: block; }
		#printVersion { display: none; }
	</style>
	<style type="text/css" media="print">
		#userForm { display: none; }
		#printVersion { display: block; }
	</style>
</head>

<body>
<div id="userForm">
	<form>
		<input type="text" id="tbxFirstName" name="tbxFirstName" onchange="z('spnFirstName','tbxFirstName');" value="" /><br />
		<input type="text" id="tbxLastName" name="tbxLastName" onchange="z('spnLastName','tbxLastName');" value="" /><br />
	</form>
</div>
<div id="printVersion">
	<p>
		First Name: <span id="spnFirstName"></span><br />
		Last Name: <span id="spnLastName"></span>
	</p>
</div>
</body>
</html>

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

samobellows · Oct 29, 2009

Thanks a ton for that code example, it's working like a charm now. turns out the only problem i had was a fairly simple problem with the way my external CSS files were linking, and that method would have worked, but when it didn't, i tried to find something else, assuming that the error was it not being able to do what i wanted, not me typing it wrong. lesson learned though, and thanks again!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Printing hidden Div tags with javascript variables. 1

samobellows

Programmer

vicvirk

Programmer

samobellows

Programmer

Similar threads

Part and Inventory Search

Sponsor