Volume I - Issue VI - June 2001
HTML Forms II
Using JavaScript to Enhance Your Forms
David Mortensen
Editor, EZ-NetAdvantage

In last month's issue we learned about creating interactive forms in HTML. We created a simple form with various input types (checkboxes, radio buttons, dropdown lists, etc.). What else can we do to improve on our forms? Click the button below to see an example of what will be demonstrated in this article.

Not bad, eh? In this article, we'll give you all the tools necessary to create a similar form of your own.

Create a Popup Window
With JavaScript, you can easily create a popup window and have just about any page on the Internet show up in it. Since the windows we're creating here are smaller than normal, the pages created in EZ-PageBuilder™ will not lend themselves very well to our popup windows. Your best bet will be to create your custom form in a page offline and then upload the file using EZ-FileManager™. It may be helpful to you to view the source of the pages that I created for my form and for my thank you page. Feel free to copy those and modify them to your purposes.

The first step in creating the popup window is to enter EZ-PageBuilder™ and open the page from which the new window will pop up. Then you have to decide some things about the popup window. For instance, how tall will it be? How wide? Should it have scroll bars? Should it be resizable? All of these things can be altered. Once you have made those decisions copy the following code into an HTML block:

Replace "http://www.PutYourPageNameHere.com/" with the actual URL of the page that you would like to come up in the popup window. Replace "400" with the width (in pixels) of your popup window, and replace "300" with the height of your popup window. Replace "Name Your Button" with the text that you would like your button to display. Voila! You should now have a fully functioning button that brings up a popup window.

Create A Thank You Page
Whether you are doing a popup window form or a traditional HTML form in the middle of EZ-PageBuilder™, it is a nice thing to provide a thank you page after someone has submitted your form. Chad, from our programming department, came up with this simple script to allow that. It requires that you add the following JavaScript to your page and that you change the tag used to create your "submit button" to the tag listed in the second box below.



Close the Thank You Page
If you have a popup window, it is a good idea to put a button on the thank you page that will close the window and send the user back to your site. Put the following code into your thank you page to achieve this effect.


If you are not using a thank you page and would like to send the user back to the page that the form was on, put the following code into your thank you page.


Conclusion
Creating forms with these kinds of features begins to become somewhat advanced. DON'T GET FRUSTRATED! It's not easy. It took me a lot of trial and error to learn these things myself. Review your code continuously for errors. When you're satisfied, test it in both Internet Explorer and Netscape Navigator to be assured that everyone will see it the same. Good Luck!