Entry
How do I generate a printable page of form data inputted?
How do I hide certain fields and their values on the preview window (like the referrer field etc.?)
Feb 25th, 2000 11:02
Hiroto Sekine, Martin Honnen, Jon Pettit, dan theman,
Simply put you submit your form to a new window where you display the
form data for verification and printing. The knowledge base entry about
parsing form data resulting from a GET form submission shows how to
access the data. Here is a complete example of two page one containing
an example FORM and the second being the generic form processing page
called for displaying the form data:
<HTML>
<HEAD>
<SCRIPT>
// connect this function as shown below to a form button
function showData (form) {
window.currentForm = form;
form.oldAction = form.action;
form.oldTarget = form.target;
form.oldMethod = form.method;
form.action = 'formPrintData.html';
form.target = 'formData' + new Date().getTime();
form.method = 'get';
open ('', form.target);
form.submit();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm" ACTION="whatever.html" METHOD="post">
<INPUT TYPE="text" NAME="God" VALUE="Kibo">
<INPUT TYPE="text" NAME="Religion" VALUE="Kibology">
<BR>
<SELECT NAME="aSelect">
<OPTION VALUE="Kibo">Kibo
<OPTION VALUE="Kibologist">Kibologist
<OPTION VALUE="Kibology">Kibology
</SELECT>
<BR>
<INPUT TYPE="button" VALUE="show data"
ONCLICK="showData(this.form);"
>
<INPUT TYPE="SUBMIT">
</FORM>
</BODY>
</HTML>
formPrintData.html (nothing for you to change here):
<HTML>
<HEAD>
<TITLE>
form data
</TITLE>
<STYLE>
#gui { position: relative; visibility: hidden; }
</STYLE>
<SCRIPT>
if (opener) {
opener.currentForm.action = opener.currentForm.oldAction;
opener.currentForm.target = opener.currentForm.oldTarget;
opener.currentForm.method = opener.currentForm.oldMethod;
}
function parseQueryString (str) {
str = str ? str : location.search;
var query = str.charAt(0) == '?' ? str.substring(1) : str;
var args = new Object();
if (query) {
var fields = query.split('&');
for (var f = 0; f < fields.length; f++) {
var field = fields[f].split('=');
args[unescape(field[0].replace(/\+/g, ' '))] =
unescape(field[1].replace(/\+/g, ' '));
}
}
return args;
}
var args = parseQueryString ();
function showGui () {
if (document.layers) {
if (window.innerWidth != 0)
document.gui.visibility = 'show';
}
else {
var gui = document.all ? document.all.gui : document.getElementById
('gui');
gui.style.visibility = 'visible';
}
}
window.onbeforeprint = function () {
document.all.gui.style.visibility = 'hidden';
}
window.onafterprint = function () {
document.all.gui.style.visibility = 'visible';
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="showGui();">
<H1>Your Form Input</H1>
<TABLE BORDER="0">
<SCRIPT>
for (var arg in args) {
document.write('<TR><TD>' + arg + ':<\/TD><TD>' + args[arg]
+ '<\/TD><\/TR>');
}
</SCRIPT>
</TABLE>
<DIV ID="gui">
<FORM NAME="guiForm">
<INPUT TYPE="button" VALUE="print data"
ONCLICK="if (window.print) window.print()"
>
<INPUT TYPE="button" VALUE="close window"
ONCLICK="window.close()"
>
</FORM>
</DIV>
</BODY>
</HTML>
I have included some goodies here like hiding the two buttons in the
print output.
