Form Targeted to a Pop-up Window

Sometimes you may want a form to be processed and the result displayed in a smaller pop-up window. The purpose of this example is not to discuss whether or not this is a good idea, it is to simply explain how to do it. The example form below will open the result page in a pop-up window. It doesn't matter what you enter in the box, the results aren't saved and don't go anywhere except the pop-up window.

How do you do this?

This explanation assumes the use of Macromedia Dreamweaver. If you're not using Dreamweaver, view this page's source code and copy the <script> block that contains the MM_openBrWindow function. Paste that script block into the <head> of your page. Then copy the onSubmit event assignment from this page's <form> tag and paste that into your form tag. Adjust the dimensions to suit your desired window size.

Apply the open browser window behavior

Select the <form> tag in the quick tag selector: Image of the form tag in the quick tag selector

From the Behaviors list, choose Open Browser Window. The below dialog will be displayed:

In the Open Browser Window Dialog, set the URL to display to "about:blank" without the quotation marks and set a Window name for the window to be opened. It doesn't matter what name you use, other than the reserved names _blank, _parent, _self, or _top. Don't use any of those. If the form is being used in a frameset, do not use the name of one of your frames. Just remember what name you gave it.

Enter the desired size for the pop-up window and choose any other options you may want in the dialog. When done, click the OK button. Check in the Behaviors panel that the open browser window is set to the form's onSubmit event:Image of the behaviors panel after applying the behavior

Set the form's target

Once again, select your <form> tag in the quick tag selector (if it isn't still selected) and, in the Target field of the property inspector, type the same name that you used in the open browser window behavior:Image of the property inspector with the form's target set

That's all there is to it! Your form will now open in a pop-up window.

How does it work?

When the form is submitted, the open browser window behavior is called, which opens a named window with a blank page. Since the target of the form is set to this named window, the form will open the file specified by its action attribute in that same named window. Simple!

What happens if JavaScript is not available?

The astute among you may note that the open browser window behavior relies on JavaScript. If JavaScript is not enabled, the open browser window behavior will not be executed. In that case, the form's target will not already exist, so a new "normal" browser window will be opened and the form's action url will be opened in that window. In other words, it will degrade gracefully.

Is it valid?

Okay, here is one last thing to discuss. If you are using a strict document type, the TARGET attribute of the form tag is not valid. If you, for example, validate this page, you will find that it does not pass the validation. Now I am a big fan of using valid code. However, I am also a pragmatist. The fact is that the TARGET attribute, although deprecated, still works and there is no reliable replacement for it. If having valid code is important to you, just use a transitional (or loose) document type on the page containing the form. A transitional document type allows the use of deprecated elements, so your page will be valid.