Print only items where checkbox is checked

PushCode · Dec 17, 2003

I've been asked to provide some tricky printing functionality to a dynamicly generated page. The page is to display each record along with a checkbox. Then one print button at the bottom of the page. The idea is to let the user check the box next to each record they want to print, then when they click the print button at the bottom of the page, only those records that were selected will be printed.

I'm assuming some combination of CSS and Javascript will be required, but I really don't know. Any ideas? Thanks in advance!

Below is some basic code to give an idea of what I'm working with:

<form name="form1" method="post" action="">
<cfoutput query="records">
<tr>
<table width="100" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><input type="checkbox" name="checkbox" value="checkbox"></td>
<td>#records.fname#</td>
<td>#records.mname#</td>
<td>#records.lname#</td>
</tr>
<tr>
<td colspan="4">#records.bio#</td>
</tr>
</table>
</tr>
</cfoutput>
<p>
<input type="button" value="Print Cards" onclick="doprint()">
</form>

jemminger · Dec 17, 2003

this works for me in Moz FB and IE6:

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
	<head>
		<title>test</title>
		<script type=&quot;text/javascript&quot;>
			function setPrint(cb) {
				var cell = cb.parentNode;
				cell.className = cb.checked ? &quot;print&quot; : &quot;noprint&quot;;
			}
		</script>

		<style type=&quot;text/css&quot;>
			@media print {
				.print {
					display:inherit;
				}
				.noprint {
					display:none;
				}
			}
		</style>

		<meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-1&quot;>
		<meta http-equiv=&quot;Pragma&quot; content=&quot;no-cache&quot;>
	</head>

	<body>
		<form>
			<table>
				<tr>
					<td class=&quot;noprint&quot;>
						data 1
						<input type=&quot;checkbox&quot; onclick=&quot;setPrint(this);&quot; />
					</td>
				</tr>
				<tr>
					<td class=&quot;noprint&quot;>
						data 2
						<input type=&quot;checkbox&quot; onclick=&quot;setPrint(this);&quot; />
					</td>
				</tr>
				<tr>
					<td class=&quot;noprint&quot;>
						data 3
						<input type=&quot;checkbox&quot; onclick=&quot;setPrint(this);&quot; />
					</td>
				</tr>
				<tr>
					<td class=&quot;noprint&quot;>
						data 4
						<input type=&quot;checkbox&quot; onclick=&quot;setPrint(this);&quot; />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); }

PushCode · Dec 17, 2003

Thanks Jeff,

Maybe you can help me work for my app. I need give the user the ability to check the items he needs, then click a print button to actually print those checked items.

I modified the code you provided, but when it prints, nothing gets printed to the page, regardless of what is checked. Here is the modified code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function setPrint(cb) {
var cell = cb.parentNode;
cell.className = cb.checked ? "print" : "noprint";

window.print();

}

</script>

<style type="text/css">
@media print {
.print {
display:inherit;
}
.noprint {
display:none;
}
}
</style>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Pragma" content="no-cache">
</head>

<body>
<form>
<table>
<tr>
<td class="noprint">
data 1
<input type="checkbox" />
</td>
</tr>
<tr>
<td class="noprint">
data 2
<input type="checkbox" />
</td>
</tr>
<tr>
<td class="noprint">
data 3
<input type="checkbox" />
</td>
</tr>
<tr>
<td class="noprint">
data 4
<input type="checkbox" />
</td>
</tr>
</table>
<input type="button" name="Print" value="Print It" onClick="setPrint(this)">
</form>
</body>
</html>

jemminger · Dec 17, 2003

right now setPrint() is designed to update the className of the checkbox's parent cell as each checkbox is clicked. is there some reason you want to do this in a batch when the print button is clicked?

here is the former method:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function setPrint(cb) {
var cell = cb.parentNode;
cell.className = cb.checked ? "print" : "noprint";
}

</script>

<style type="text/css">
@media print {
.print {
display:inherit;
}
.noprint {
display:none;
}
}
</style>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Pragma" content="no-cache">
</head>

<body>
<form>
<table>
<tr>
<td class="noprint">
data 1
<input type="checkbox" onclick="setPrint(this);" />
</td>
</tr>
<tr>
<td class="noprint">
data 2
<input type="checkbox" onclick="setPrint(this);" />
</td>
</tr>
<tr>
<td class="noprint">
data 3
<input type="checkbox" onclick="setPrint(this);" />
</td>
</tr>
<tr>
<td class="noprint">
data 4
<input type="checkbox" onclick="setPrint(this);" />
</td>
</tr>
</table>
<input type="button" name="Print" value="Print It" onClick="window.print();">
</form>
</body>
</html>

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); }

PushCode · Dec 17, 2003

Jeff,

The reason I want to do it in a batch when the print button is clicked is b/c that's what seems to make sense to users we've asked. They can select and deselect as they wish, then when they are ready they can click the print button and print the ones they need.

Ryan

jemminger · Dec 17, 2003

it already works the way you're describing, but anyway here's a batch mode version:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function doPrint(form) {
var cbs = form.print;

if (!cbs.length) {
setPrint(cbs);
} else {
for (var x = 0; x < cbs.length; x++) {
setPrint(cbs[x]);
}
}
window.print();
}

function setPrint(cb) {
var cell = cb.parentNode;
cell.className = cb.checked ? "print" : "noprint";
}
</script>

<style type="text/css">
@media print {
.print {
display:inherit;
}
.noprint {
display:none;
}
}
</style>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Pragma" content="no-cache">
</head>

<body>
<form>
<table>
<tr>
<td class="noprint">
data 1
<input type="checkbox" name="print" />
</td>
</tr>
<tr>
<td class="noprint">
data 2
<input type="checkbox" name="print" />
</td>
</tr>
<tr>
<td class="noprint">
data 3
<input type="checkbox" name="print" />
</td>
</tr>
<tr>
<td class="noprint">
data 4
<input type="checkbox" name="print" />
</td>
</tr>
</table>
<input type="button" name="Print" value="Print It" onClick="doPrint(this.form);">
</form>
</body>
</html>

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); }

PushCode · Dec 17, 2003

Jeff,

I see what you mean now by the first one. I got it working. Thanks for your help.

Ryan

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!

Print only items where checkbox is checked

PushCode

Programmer

jemminger

Programmer

PushCode

Programmer

jemminger

Programmer

PushCode

Programmer

jemminger

Programmer

PushCode

Programmer

Similar threads

Part and Inventory Search

Sponsor