Working... Popup For Forms

Working... Popup For Forms
by
Mari Bontrager

Permission is granted to reprint this article in its entirety, provided no reprints are sent in conjunction with unsolicited bulk email, provided no fee or other value is exchanged, provided no changes are made to the article, and provided the author's name, signature lines, and copyright line are printed with the article; except you may change the article's title.

Find out how to display a "Working..." popup window to let visitors know a form submission is being processed. The popup closes automatically as soon as the "thank you" page is finished loading.

This is what happens:

Your visitor clicks a form submit button.
A popup window appears.
Your script does it's work.
Your "thank you" page finishes loading.
The popup disappears.

The popup can contain, "Working..." or other explanatory text. It can contain an image, maybe an animated GIF with a progress bar, or even a flash animation.

(A demonstration, with a link for downloading a working example, is at http://willmaster.com/a/12/pl.pl?art125)

The rest of this article explains how it works.

One web page needs to be created (the popup page) and two web pages need to be modified (the form page and the thankyou page).

The Popup Page

First, create the popup page. The example contains the text, "Working..." You can put any content you want into the popup page.

<html>
<body onLoad="self.focus();" onBlur="self.focus();">
<h1>W o r k i n g . . .</h1>
</body>
</html>

Notice that the popup page's <body... tag contains the attributes

onLoad="self.focus();" onBlur="self.focus();"

The onLoad=... puts the popup on top when it finishes loading. And the onBlur=... puts the popup back on top whenever a different window is clicked.

That's all that needs to be done with the popup page (except uploading it to your server, of course).

The Form Page

Two changes need to be made to the web page with the form:

Somewhere above the <form... tag, preferably in the HEAD area, put this JavaScript:

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2001 Bontrager Connection, LLC
function WorkingMessage() {
   var url="workingpopup.html"; // URL of popup content
   var height = 100;            // Height of popup
   var width = 450;             // Width of popup
   var att='width=' + width + ',height=' + height;
   WorkingMessagePopup=window.open(url,"wmp",att);
} // -->
</script>

Notice the places where you put the URL of the popup window, the height of the popup window, and the width of the popup window. Those are the only changes you need to make.

In the <form... tag, put this attribute:
```
onSubmit="WorkingMessage();"
```
That attribute will launch the popup window when the form's submit button is clicked.

You're done with the form page.

The ThankYou Page

The thankyou page also needs two changes:

In the HEAD area, put this JavaScript:

<script language="Javascript">
<!-- Copyright 2001 Bontrager Connection, LLC
function WorkingMessage() {
   var url="";       // Blank for thankyou page.
   var height = 100; // Height of popup
   var width = 450;  // Width of popup
   var att='width=' + width + ',height=' + height;
   WorkingMessagePopup=window.open(url,"wmp",att);
}
function KillWorkingMessagePopup(){
   WorkingMessage();
   WorkingMessagePopup.close();
} // -->
</script>

Notice that the WorkingMessage() function is identical to the one on the form page except that the url of the popup is blank.

The extra function, KillWorkingMessagePopup(), closes the popup.

In the <body... tag, put this attribute:
```
onLoad="KillWorkingMessagePopup();"
```
When the thankyou page finishes loading, that attribute will launch the function that closes the popup window.

And that's all for the thankyou page.

How It Works

The key is in the naming of the popup window. It happens in this line:

WorkingMessagePopup=window.open(url,"wmp",att);

The above line creates a popup window and names it "WorkingMessagePopup"

The same name is used in both the form page and the thankyou page.

The form page creates the popup with the content at the specified url. The thankyou page creates the same popup but with no content and then immediately closes it. (The reason the thankyou page loads the popup before closing it is because some browsers don't recognize the popup's name unless it has been created by the page that does the closing.)

So when your form's submit button is clicked, the popup appears. Your CGI script then does whatever it's supposed to do. When the script is done and redirects the visitor's browser to the thankyou page, the thankyou page loads and then closes the popup.

A demonstration page containing a link for downloading a ZIP file with the complete demonstration set is at http://willmaster.com/a/12/pl.pl?art125

By: Will Bontrager

Copyright 2001 Bontrager Connection, LLC
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com