Sometimes it would be nice to show your visitor a popup window after submitting a form — instead of showing a whole new page.

When a whole new page is displayed for the "thank you" or confirmation, the user needs to click the browser's back button twice; once to get back to the form and again to get to the page where s/he was before the form.

This article will show you how to put the "thank you" or confirmation page into a popup window. You will also have the option of

• automatically backing the main browser window to the page your user was at before arriving at the form,

• sending the main browser window to a completely new page, or

• letting the main browser window remain where it's at, on the page with the form.

Note that non-JavaScript enabled browsers will not see the popup window. Instead, they will see the "old-fashioned" confirmation page.

Coding a page to put the form confirmation into a popup window requires paying close attention to detail. I'll make it as easy for you as I can. There is also a demo page at http://willmaster.com/a/8/pl.pl?80demo where you can study the code of a working example.

The way CGI works, the program returns information to the same browser window that called it. In other words, if you have a contact form and someone uses it, then the CGI program will send the "thank you" or confirmation page to the same browser window where the form is — because that is the window that called it.

Having the confirmation page show up in a popup window instead would seem to violate CGI protocol. But it won't, not when using the method shown here.

What normally happens is that the form sends the data it gathered from the user straight to the CGI program.

Here you will learn how to make the form send the data to a JavaScript function instead. The JavaScript function creates a popup window to send the data to the CGI program. The CGI program, then, sends the confirmation page back to the window that called it — which is the popup window.

Simple, huh? Well, somewhat, except the JavaScript function must encode all the form information in a special way before it sends it to the CGI program. This is where attention to detail is critical because every form field, including hidden fields, must be accounted for so the encoding can take place. Not to worry; I will show you how to do that.

NOTE: If you use HTML email, you may need to "view source" in order to see the source code presented here. If the source code still seems incomplete or corrupted, a clean copy is at http://willmaster.com/a/8/pl.pl?80art

There are three limitations you should be aware of:

1. The JavaScript function sends the data to the CGI script using what is called the "GET" method.

   The amount of data that can be sent to the script is limited. Different servers accept different amounts of data with the "GET" method. Some servers will accept up to 4k; some as little as 256 bytes.

   You can ask your hosting company, "How much data can I send to my scripts with a 'GET' URL." (A "GET" URL is the kind of URL that points to a script and then has a question mark with data following it; i.e.: http://domain.com/cgi-bin/script.cgi?admin=yes)

   Or, you can follow the instructions in this article and try different amounts of information until you find the limit. Master Feedback (the example program) is ideal for this; just paste a large text file into the message area and see how much survives in the email that is sent back to you.

2. As just mentioned, our JavaScript function sends data to the CGI program with method "GET." However, most forms use method "POST" to send the information. ("POST" can send much more information than "GET", often as much as 32k.)

   Most CGI programs don't care whether they receive the information with method "POST" or method "GET". But you'll want to test it, anyway.

   To test whether or not your CGI program will accept information with method "GET", simply change your

           <form method="POST" ...> 
   

   tag to

           <form method="GET" ...>
   

   Then try the form and see if it works. If your CGI program doesn't complain, then it will receive data with either method. But if it does complain, you will not be able to use this article's method of putting your "thank you" page into a popup.

3. Your form field names may not contain spaces or special characters. You'll be okay if you'll use only alphanumeric and underline characters for your field names.

Master Feedback will be used in our example. It is a free CGI program and its form is relatively simple.

(Note: You can download your own copy of Master Feedback at http://willmaster.com/a/8/pl.pl?msmf — If you have any problems, questions, or suggestions related to Master Feedback, the MasterCGI Resource Center at http://MasterCGI.com/ is now the support area for Master Series programs.)

First:

The first thing to do is modify the form so it will work with both JavaScript and non-JavaScript enabled browsers. Both the <form... tag and the <input type="submit"... tag are affected.

1. This is what the <form... tag of our example (see the demo page) looks like:

   <form method="POST" action="MasterFeedback.cgi">
   

   Add the attribute:

   name="myform"
   

   It becomes:

   <form name="myform" method="POST" 
   action="MasterFeedback.cgi">
   

2. This is what the <input type="submit"... tag looks like:

   <input type="submit" value="Send!">
   

   Add the attribute:

   onClick="return ConfirmationPopup()"
   

   It becomes:

   <input onClick="return ConfirmationPopup()" type="submit" 
   value="Send!">
   

Those are the only changes you need to do to the form.

Second:

The second thing to do is to copy the JavaScript from the demo page at http://willmaster.com/a/8/pl.pl?80demo and put it into the HEAD area of your own page.

There are six customization steps.

The first three steps are specifying the size of the popup and whether or not it shall be resizable or scrollable. (Because different browsers display text in different sizes, I suggest saying 'yes' to either resizable or scrollable.)

Step 4 is where you specify the URL of the script. It's the same URL as in your form tag's action="_____" attribute.

At step 5 is where you specify what your main window will do right after the popup displays. It can stay right where it's at, go back 1 or more pages, or go to a different URL.

The last step, step 6, is where you have to pay attention to detail.

Write down the name of each form element with a name="_____" attribute. This includes hidden fields, form fields for user supplied information, and might include the form submit button if the tag contains a name="_____" attribute.

Now, for each name you wrote down, type the following JavaScript line (replacing NAME with the name you wrote down):

constructURL( 'NAME', document.myform.NAME.value );

The order of the above lines don't matter much. You might put the names of textarea fields last, though. Then, if the form user types in more information than your hosting company allows for method "GET", the message will be chopped instead of other form fields dropped entirely.

That's it.

The demo page shows you how to do it. While it may look complicated now, doing it once or twice will make it seem much simpler.

Some notes about the confirmation or "thank you" page —

Take into consideration that the same confirmation page will be used for both JavaScript and non-JavaScript enabled browsers. That confirmation page is whatever your script would normally use.

If you want to provide a "close window" button, you must use JavaScript code to put it on the page. Otherwise, the non-JavaScript users who see your confirmation page in their main browser window would be closing their entire browser.

Also, your non-JavaScript users might require information not applicable to JavaScript users. You can put that information between <noscript> and </noscript> tags.

Here is what the confirmation page of the example form has:

<script type="text/javascript" language="JavaScript"><!—
document.write('<form><input type="button" + 
value="Close Window" onClick="self.close()"></form>');
//—></script>
<noscript>
Please use your browser's "back" button to return.
</noscript>

Another consideration is to ensure the popup confirmation always appears on top of other windows when it first launches. You can do that by putting

onLoad="self.focus()"

into the <body... tag.

If you want the popup window to close itself whenever the user clicks anywhere outside the popup, put

onBlur="self.close()"

into the <body... tag, too.

I hope you find this article useful.

Copyright 2001 William Bontrager
Programmer/Publisher, "WillMaster Possibilities" ezine
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com
Business Home Page: http://willmaster.com/