A Gift of "Life" : The Document Object Model
Multimedia in Microsoft Internet Explorer
You are here: irt.org | Articles | Dynamic HTML (DHTML) | Building a Dynamic Thank You Page [ previous next ]
Published on: Monday 15th June 1998 By: Martin Webb
When a visitor submits a form on your Web site, wouldn't it be nice to display to your visitor the details they submitted rather than just sending them a boring old "Thank You!" message? This article will describe how to extend an existing form so that you can display generic details of a form on the next page so the visitor knows exactly what was received by the server.
We're not going to talk about creating guestbooks and forms to email CGI script information in this article. For you to make use of the examples in this article you must already have access to one that displays a thank you page, which you can specify as part of the form, on completion of the form submission.
Typical form CGI scripts accept several values that dictate how the form results should be processed -- things like where the details of the form should be sent and which page should be shown once the form has been processed. The form field name dictates the data type; the form field value dictates the action. Normally these values are held in hidden form fields.
In the following example the CGI script userform.cgi in the cgi-bin directory is used to process the details in the form when it is submitted to the server. In this form there are two hidden fields SendMailTo and redirect. These details are certain to be different from the details needed with your own form CGI scripts.
The contents of the form in this example are sent to martin.webb@btinternet.com, and once sent, the document thanks.htm is shown.
<FORM METHOD="POST" ACTION="/cgi-bin/userform.cgi"> <INPUT TYPE="HIDDEN" NAME="SendMailTo" VALUE="martin.webb@btinternet.com"> <INPUT TYPE="HIDDEN" NAME="redirect" VALUE="thanks.htm"> <INPUT TYPE="SUBMIT"> </FORM VALUE="Submit">
That example was pretty useless, as all we would receive is an email saying someone had sent us an email. There wouldn't actually be any content.
In reality the forms generally contain a few more input fields. For example:
<FORM METHOD="POST" ACTION="/cgi-bin/userform.cgi"> <INPUT TYPE="HIDDEN" NAME="SendMailTo" VALUE="martin.webb@btinternet.com"> <INPUT TYPE="HIDDEN" NAME="redirect" VALUE="thanks.htm"> <P>Comments: <BR><TEXTAREA NAME="comments" COLS="38" ROWS="4" WRAP="VIRTUAL"></TEXTAREA> <P>Your age: <BR> <INPUT TYPE="RADIO" NAME="age" VALUE="5-15"> 5-15 <INPUT TYPE="RADIO" NAME="age" VALUE="16-25"> 15-25 <INPUT TYPE="RADIO" NAME="age" VALUE="26-35"> 26-35 <INPUT TYPE="RADIO" NAME="age" VALUE="36-45"> 36-45 <INPUT TYPE="RADIO" NAME="age" VALUE="46-55"> 46-55 <INPUT TYPE="RADIO" NAME="age" VALUE="56-65"> 55-65 <P>Your favorite color: <SELECT NAME="color"> <OPTION>Red <OPTION>Orange <OPTION>Yellow <OPTION>Green <OPTION>Blue <OPTION>Indigo <OPTION>Violet </SELECT> <P>Your Hobbies: <BR> <INPUT TYPE="CHECKBOX" NAME="Computing" VALUE="Computing"> - Computing <INPUT TYPE="CHECKBOX" NAME="Carpentry" VALUE="Carpentry"> - Carpentry <INPUT TYPE="CHECKBOX" NAME="Drawing" VALUE="Drawing"> - Drawing <INPUT TYPE="CHECKBOX" NAME="Reading" VALUE="Reading"> - Reading <P>Your email address: <BR><INPUT TYPE="TEXT" SIZE="38" NAME="email"> <P>Your name: <BR><INPUT TYPE="TEXT" SIZE="38" NAME="yourname"> <P><INPUT TYPE="SUBMIT" VALUE="Submit"> </FORM>
If someone were to submit a similar looking form on my Web site I would receive an email that looked something like the following:
SendMailTo:
martin.webb@btinternet.com
redirect:
thanks.htm
age:
26-35
color:
Green
Hobbies:
Computing
email:
someone@somewhere.com
yourname:
someone
Comments:
This site rocks!
Essentially, I would receive the value entered by the visitor for each field in the form.
At the moment the contents of my thanks.htm file is simply:
<HTML> <BODY> <H1>Thank You!</H1> </BODY> </HTML>
The remainder of this article describes how to use JavaScript on the client-side to pass the details entered by the visitor to the thank you page for display.
So how do we pass information from one page to another? We simply tack the information onto the thanks.htm document, using the extremely useful ? character to separate the data from the URL (e.g., thanks.htm?name=value). We can add any number of name value pairs to the URL by separating each one with an & character (e.g., thanks.htm?name=value&name2=value2). All we need to do is add some JavaScript to our existing form to do all of this for us.
To do this, we need to capture the form submission to alter the value of the hidden redirect form field. We do this by using the forms onSubmit JavaScript event handler:
<FORM METHOD="POST" ACTION="/cgi-bin/userform.cgi" onSubmit="return thankYou(this)">
When the form is submitted, the thankYou() function is invoked and passed a reference to this form. The results of the thankYou() function are returned to the onSubmit event handler -- this can be used to halt the form submission if deemed necessary.
Now all we need to do is include the JavaScript code necessary to alter the redirect form field:
<SCRIPT language="JavaScript"><!-- var debug = true; // replace with: var debug = false;
The debug boolean flag is used later on in the code to enable us to test the Dynamic Thank You page without bothering to submit the form to the server for processing.
function thankYou(form) {
form.redirect.value = 'thanks.htm' + '?' +
escape('Action') + '=' + escape('Feedback') + '&' +
escape('Message Sent To') + '=' + getText(form.SendMailTo) + '&' +
escape('Your Age') + '=' + getRadio(form.age) + '&' +
escape('Favourite Color') + '=' + getOption(form.color) + '&' +
escape('Your Hobbies') + '=' + getCheckboxes(form.Computing,form.Carpentry,form.Drawing,form.Reading) + '&' +
escape('Your Email Address') + '=' + getText(form.email) + '&' +
escape('Your Name') + '=' + getText(form.yourname) + '&' +
escape('Comments') + '=' + getText(form.comments) + '&';
if (debug) {
location.href = form.redirect.value;
return false;
}
return true
}The thankYou() function accepts the reference to the form and holds it in the form variable. It then sets the value of the forms redirect field to the required URL plus the form data following the ? character. The data is built up using descriptive text followed by an = character, followed by the values of various different functions and then an & character. The descriptive text is escaped to replace any non-alphanumeric characters. It's a bad idea to send non-alphanumeric characters as part of a URL without first escaping them.
A test is made to see if the debug boolean variable is set to true. If it is, it just loads the document held in the forms redirect field directly into the browser and returns false to the forms onSubmit event handler. Otherwise it returns true, and the form then subsequently submits the form to the server for processing.
Each of the value portions of the name-value pairs are returned from calls to either the getText(), getRadio(), getOption(), or getCheckBoxes(). Each is passed a reference to the form field to return the value of:
function getText(object) {
return escape(object.value)
}The getText() function returns the escaped text, textarea, hidden or password field value back to the thankYou() function.
function getOption(object) {
return escape(object.options[object.selectedIndex].text);
}The getOption() function returns the selected option fields text value back to the thankYou() function.
function getRadio(object) {
for (var i = 0; i < object.length; i++)
if (object[i].checked)
return object[i].value;
return '';
}The getRadio() function returns the value of the selected radio button (if one is selected) back to the thankYou() function.
function getCheckboxes() {
var output = '';
for (var i = 0; i < getCheckboxes.arguments.length; i++)
output += getCheckbox(getCheckboxes[i]) + escape(' ');
return output;
}The getCheckboxes() function passes, one at a time, the arguments received to the getCheckbox() function, and returns the accumulated results back to the thankYou() function.
function getCheckbox(object) {
if (object.checked)
return escape(object.value);
else
return '';
}
//--></SCRIPT>The getCheckbox() function returns the values of any selected check boxes to either the thankYou() function or the getCheckboxes() function.
When the thankYou() function has finished, the forms redirect field will hold a URL that contains the complete data entered on the form.
All we need to do now is add some JavaScript to our normal Thank You page in order to accept the passed data and format the output. The following is a sample Thank You page you could use to perform this:
<HTML> <HEAD> <TITLE>Thank You</TITLE> </HEAD> <BODY> <H1>...Message Received</H1> <SCRIPT LANGUAGE="JavaScript"><!-- var input = '', output = '';
We define two empty strings, input to hold the data passed to the current document, and output to hold the HTML before writing it to the document.
if (location.search.length > 0) input = location.search.substring(1);
To access the data following the ? character in the documents location, we use the location objects search property. This returns everything including the leading ? character.
Next, we check to make sure the locations search property has some actual content by checking its length. If the length is greater than zero, we strip the leading ? character from the search property and place the results in the input string.
while (input.length > 0) {
variableName = input.substring(0,input.indexOf('='));
input = input.substring(input.indexOf('=')+1);
variableValue = input.substring(0,input.indexOf('&'));
input = input.substring(input.indexOf('&')+1);
output += '<P><B>' + unescape(variableName) + ':<\/B>';
output += '<XMP>' + unescape(variableValue) + '<\/XMP>';
}This part performs a loop while the length of the input string is greater than zero.
For each pass through the loop we extract the variable name and then the variable value. The unescape() method is used to reverse the escaping of the data performed in the previous form page. The variableName is extracted with the aid of the = character in the input string. The variableValue is extracted with the aid of the & character in the input string.
After extracting each item of data, we reduce the contents of the input string by deleting the data extracted from the beginning of the string, plus the = or & character.
The output string is built up with the highlighted variableName, followed by the variableValue wrapped in <XMP> and <\/XMP> tags. This converts any HTML entered in the thank you form to example code so it does not effect the layout of the Thank You page.
Eventually the length of the input string is reduced to zero, in which case the while loop finishes the process.
document.write(output); //--></SCRIPT>
After all the data has been stripped from the input string, the output string is written to the document.
<H2>Thank you!</H2> </BODY> </HTML>
As long as the basic loop through the search property remains the same you can change the layout and design of the Thank You page as much or as little as you like.
Take a moment now to try the demo to see how the Thank You page looks. When you're through with that, view and download the source code of the input.htm page and the thanks.htm page to build your own dynamic Thank You page.
A Gift of "Life" : The Document Object Model
Multimedia in Microsoft Internet Explorer
What is So Dynamic About Dynamic HTML?