Let's say that you can't guarantee that your clients or users have Adobe Acrobat Reader installed or you don't want to spend $250 - $300 for the full version of Adobe Acrobat. However, you want to present a pleasant-looking form (perhaps matching you site's color scheme or style) that can be printed out without all those silly-looking text-box borders and drop-down arrows, etc. Sure, you can get rid of those text-box borders with a style sheet, but they still have a definite width. What if your client has a last name so long that when the form is printed, part of the last name is cut off? Or, just the opposite occurs, your client has a 2 or 3 letter last name, and you have just wasted an incredible amount of space trying to accommodate a client with a long last name. And what about those drop-down arrows or the other form field types? This article will show you how to separate your form presentation in a browser from the way the form prints out without processing the form through a CGI script or other means. Everything is handled client-side. The user can print out the form even before it is submitted.
We will discuss the handling of the most common form elements in detail. I will not discuss client-side or server-side validation. Everything discussed here will be relative to the form itself.
The text box and text area will be handled identically.
The check box and radio button will be handled identically.
The drop-down and list box will be handled identically without the support of multiple selections.
The Submit button will be handled normally with alternatives using the little-known button tag.
Everything discussed is HTML 4.01, CSS Level 2, and JavaScript 1.2 compliant. All code examples have been tested on an IIS 4 server with an IE 5.1 browser on the client.
Required Software
None! (Except, perhaps, a Microsoft Internet Explorer 5.0 browser or above.)
Step 1: Create a basic HTML form using all of the above-mentioned form elements. Immediately after each form element (with the exception of the check box and the radio buttons) write an empty opening and closing font tag. All of the form elements (minus the exceptions) will have a class named "display" and all the empty font tags will have a class named "print." Add three buttons --, a Submit, Print, and a Reset button. The buttons will also have a class named "display." This example is not fancy, but you may get as fancy as you want.
Step 2: Add the following JavaScript functions into your header. Add an onBlur attribute to each of your text box and text area elements. Add an onChange attribute to each of your select elements.
onBlur="loadTxtPrint(this);" and onChange="loadSelPrint(this);"
After you save your file, you may test out your form to make sure the JavaScript functions are working.
<script language="JavaScript">
<!--Hide from legacy browsers
function loadTxtPrint(box){
//Text box or text area onBlur function. Stores the DOM index
var i = box.sourceIndex + 1;
// -of the calling Select box and adds 1 to that index.
var sValue = box.value;
//Stores the text of a text box or text area.
var oHidBox = document.all[i];
//Stores a ref. to the next DOM index (our empty font tag).
oHidBox.innerHTML = sValue;
//Writes the text into the empty font tag.
}
function loadSelPrint(box){
//Select box onChange function. Stores the DOM index of the calling
var i = box.sourceIndex + box.length + 1;
//-select box and adds the number of options plus 1 to that index.
var sel = box.selectedIndex;
//Stores the index of the selected item of the calling Select box.
var sValue = box.options[sel].text;
//Stores the text of the selected item using the Select box index.
var oHidBox = document.all[i];
//Stores a reference to the next DOM index (our empty font tag).
oHidBox.innerHTML = sValue;
//Writes the Select box's selected text into the empty font tag.
}
//-->
</script>
Step 3: Add the following style sheet into your header.
<style type="text/css">
<!-- Hide from legacy browsers
/* Specifies how tags with these classes are displayed in a browser */
@media screen {
/* All the form elements (except radio & check boxes) have this class */
.display {
font-family: Verdana;
font-size: 8pt;
}
/* The empty font tags will not be displayed */
.print {
display: none;
}
}
/* Specifies how tags with these classes are printed */
@media print {
/* All the form elements (except radio & check boxes) will not be printed */
.display {
display: none;
}
/* But our 'empty' font tags will be printed */
.print {
font-family: "Times New Roman";
font-size: 10pt;
}
}
//-->
</style>
Conclusion
What we have done is dynamically filled the inner HTML of our initially empty font tags and set their display style to none. This process is basically reversed using the @media types in a style sheet. By combining all three elements of what is commonly referred to as DHTML, we have produced a powerful, but simple way of using HTML forms. The downside is that the client or user must have scripting enabled for this to work, whereas the use of Adobe Acrobat does not. Also Adobe Acrobat includes its own form validations and supports custom JavaScript scriptlets that I believe are independent of the browser's settings.
As promised, I will briefly mention the button tag. The button tag is unique in that it has an opening and closing tag (<button various attributes>Font and/or Image tags</button>) and you can put font tags and/or image tags within the enclosed button tag. You can set the Type attribute just as you would in an input tag. What this allows is a combination of text and an image on a button. You can even perform image rollovers on the button!
Eric Coffman is currently working as an ASP (mostly!) programmer for SIMA San Diego's Web Development and Information Systems. Adobe Acrobat PDF forms are used to automatically route various requests through a user's specific chain of command within an intranet environment.
He can be contacted at komodo@backpacker.com.
Proposion N2N connects Microsoft .NET applications to Lotus Notes and Lotus Domino databases. This ADO.NET managed data provider allows you to perform blindingly fast queries and updates of Notes data from ASP.NET pages, .NET web services, Windows, or Mobile applications. An innovative SQL-like query language leverages the unique features of Notes and makes collaborative software accessible to relational database programmers.
Unlike text-based file formats image files aren't made up of words, which makes searching for an image file by keyword difficult. Instead of being able to simply open the file to see what it contains, we're stuck looking at the text around it and other metadata to determine the image's meaning. In this article, Ziran Sun shows you how to build a simple database-based image keyword system that allows you to associate keywords with images and use these keywords to make finding images easier. [Read This Article][Top]
In the second part of of his article on using MySQL with ASP.NET, Ziran Sun covers how to add a new MySQL user to the database server, assign the user the appropriate permissions, connect to the database, and build a simple ASP.NET page to perform a query. [Read This Article][Top]
Back in the days of classic ASP, if you were building a database-driven
web site, your choice was either to invest a lot of money to get a copy of Microsoft SQL Server
(or some other enterprise-ready database) or invest a lot of time finding a way to deal with the
performance and scalability limitations of Microsoft Access. Luckily these days there's
another viable alternative: MySQL. [Read This Article][Top]
Moving or copying a SQL Server database from one machine to another requires a lot of preparation in order to ensure a smooth transfer. In this article, Dina Fleet Berry examines the different methods and highlights the different issues associated with each of them. [Read This Article][Top]
There are many times when using SQL Server 2000 Query Analyzer to debug SQL statements is a better choice than debugging in Visual Studio .NET. In this article, Dina Fleet Berry explains why and walks you through the debugging process step-by step. [Read This Article][Top]
As a follow up to his article on retrieving objects from SQL Server using SQLXML and serialization, Gianluca Nuzzo discusses saving objects back to SQL Server using a schema definition file and updategrams. [Read This Article][Top]
One area that stands out when comparing ADO.NET 1.x to ADO.NET 2.0 is transaction processing. Bill Ryan shows just how easy transaction processing has become with the TransactionScope object in ADO.NET 2.0. [Read This Article][Top]
Developers often use brute force coding to marshal data between the GUI and application objects. In this article, Luther Stanton explains how to use .NET's out-of-the box data-binding functionality to make this job much easier. [Read This Article][Top]
Learn how to create a console application to queue a message in Microsoft Message Queuing (MSMQ) and then use an extended stored procedure to call the console application from a SQL Server trigger. [Read This Article][Top]
Connection pooling increases the performance of Web applications by reusing active database connections instead of creating a new connection with every request. This article shows how to monitor the connection pool, diagnose a potential problem, and apply the appropriate fix. [Read This Article][Top]
Mailing List
Want to receive email when the next article is published? Just Click Here to sign up.
