Under the Hood: The Popup From a Form Script

In this page we'll look at the technical details of how to open a popup for the results of a form. If you just want to quickly implement a popup for a form you probably will do better starting with Popup Windows: From a Form.

The Script

First let's look at the script used to open a popup from a form.

1 2 3 4 5 6 7 8 9 10 11

<SCRIPT TYPE="text/javascript"> <!-- function popupform(myform, windowname) { if (! window.focus)return true; window.open('', windowname, 'height=200,width=400,scrollbars=yes'); myform.target=windowname; return true; } //--> </SCRIPT>

This script is a little different than the script we've used in most of our other examples. The main difference is that with a link we open the popup with the link's URL, then cancel the onClick event. With forms we open a blank popup, target the form at the popup, and we don't cancel the onSubmit event.

Line 1 begins the script element and line 2 begins the comment that should surround every script.

Line 3 begins the popupform() function. popupform() takes two arguments. The first argument, myform, refers to the form itself. The second argument, windowname, sets a unique name for the popup window.

Line 4 has the opening bracket for the popupform() function. Line 5 tests for the window.focus method which is required to bring the popup to the front every time.

Line 6 opens the popup. Notice that we don't give the popup a URL. When the popup opens it's blank. Line 7 sets the target property of the form to the name of the popup, so when the form opens it targets the popup instead of the current page.

8 returns true. Technically this line isn't needed because in the onSubmit attribute we don't use return. However, it's easy to forget and put a return statement in... 8 makes the script a little more fault tolerant.

Line 9 closes the function, 10 closes the comment, and 11 closes the script.