Dynamic "on the fly" Web Forms

No, no! I am not talking about programming. Relax! You don't have to be a programmer to implement this AND I am going to give you the code how to do it.

First: an explanation...

On a recent project my customers intend to sell roughly 70 kites, that come in numerous models and designs. Their description of all of these is lacking a bit, in my humble opinion. So I suggested that beside each category we place a button users can push if they want to ask the site owners a question about any of the designs or prices.

Obviously, and for cost reasons, we can't have a separate form for each kite. So the idea was to take one form and update it on the fly.

The CGI behind this is a excellent Perl script was written by Keith Gardner called "Web Email Lite." But what I am going to share with you would work with many CGI form programs and is not dependent on the CGI. As a matter of fact, it could work equally well with Form Mail, which I know many of you use.

I decided to use some Javascript when the button was pushed. This would allow me to open a small window on the clients browser without having to take them away from the descriptions of the kites. The type of button that gets pushed to ask a question is an ordinary submit button used for forms. It doesn't say submit. All it shows is a button with a question mark on it. Here is the code for the javascript window and form button:

<form>
<input type="button" value=" ? " onClick="window.open('questions.shtml?Diamond Kite', 'help','width=350,height=300,toolbar=0,scrollbars=yes,')">
</form>

Javascript is space sensitive. In order to copy this code and make it work, the information between the form tags must all be on one line.

Besides the Javascript direction for the window size and properties of the new window, you will notice that the file this window will open with is "questions.shtml"

Take note that after the name of the file there is a question mark and some more info:

questions.shtml?Diamond Kite

The " " simply tells a web browser to put a space between the two words "Diamond Kite"

The extension of the file being opened is ".shtml" because we are going to use SSI (Server Side Includes) to pass the information after the question mark, to the Javascript window.

When the Javascript window opens there are three places in a form that a user can fill out. Their name, (which Keith's wonderful CGI script gives us the ability to personalize the response back to the sender), their e-mail address, and a textarea for their question or comments.

Are you with me so far? Good for those of you who are; I'm sorry to those of you who are not. Without going into a big technical explanation of what is happening here is a brief summary.

We've pushed a Form Button
It opens a javascript window with a form
The name of the file is "questions.shtml"
We have attached some info to the end of a question mark on the file being opened:
'questions.shtml?Diamond Kite'

Here is the code for the top part of "questions.shtml"

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0 Transistional//EN//">

<HTML>
	<HEAD>
		<TITLE>Questions</TITLE>

	</HEAD>
<BODY BGCOLOR="#FFFFFF">
			<H3 ALIGN="center">
			Question About

		<!--#echo var="QUERY_STRING" -->
			</H3>

<P> Do you have a question about the <!--#echo var="QUERY_STRING" -->?

SSI allows us to capture anything after the "?" in the URL and the command prints it to the web page. So what the user sees is:

Question About Diamond Kite
Do you have a question about the Diamond Kite?

So...OK...the user knows he/she is asking a question about the Diamond Kite. Now how do we tell the site owner that the question is about the Diamond Kite?

In the form being submitted we include a hidden input. This means that the one who submits the form never sees it. The code included in the form being submitted would look like this:

<input type=hidden name="Question_about" value="">

So when the site owners check their mail they will have an e-mail from someone with a question about the Diamond Kite.

***

Now let's examine what I have shown you. Strip it down and use the pieces. In it's most basic essence I have simply showed you a way you can pass information from one page to another. Using this technique with a form simply eliminates multiple forms, when you don't need them.

| Back to Article Index |