Web Design Master Series Article

Web Design Master Series Article is syndicated from Web-Source.net.

Syndicated articles are written by independent authors and the contents represent the author's views. The content of the article does not necessarily represent the views of Company Web staff and management.

---

Master Series Pre-Fill Forms From Last Use By William Bontrager When your visitor fills out any form on your web site, all the other forms on your web site can be pre-filled in with the information s/he provided. If the visitor provided a name and email address, for example, that name and email address can be pre-filled in all of your other forms. The pre-fill can be during the current site visit and for site visits as long as ten years in the future. It's done with a cookie. See http://willmaster.com/ for an example of how it works. Use any subscription, recommend, or contact form on the willmaster.com domain -- the home page, in the WillMaster Possibilities section, or in the Master Series CGI section. After that, all subscription, recommend, and contact forms on the willmaster.com site will have the name and email fields pre-filled for you. Your browser must, of course, accept cookies. If not, or if your preferences are set to accept only session cookies (willmaster.com cookies are set for 365 days), then the forms won't be pre-filled in for you. JavaScript is used to set and retrieve the cookie. Why? To be considerate of your site visitors by making your forms easier to use. It encourages communication. A partially pre-filled in form is an invitation. Web sites that do this might appear more professional, and helping out your site visitors is a good thing. Even web sites with only one form can use this automatic form field pre-fill method. If the site visitor might use the same form again sometime in the future, the form can be pre-filled in and ready. The Source Code http://willmaster.com/a/22t/pl.pl?demo224 has a link where you can download the JavaScript code and several example forms. Three steps are required to implement this automatic form field pre-fill method. On each web page with a form: Copy the JavaScript code from the HEAD area of the downloaded demonstration page and paste it into the HEAD are of your web page. The JavaScript has three places to be customized, marked with instructions. Your form's ACTION tag needs to specify "name" and "onSubmit" attributes. Three lines of JavaScript code need to be inserted below your form. Again, the demonstration page has examples. Specifics of each of those three steps are outlined below. The JavaScript code of the HEAD Area This JavaScript needs to be customized in three places: Specify a name for the cookie. The name needs to be something no other cookie on your web site uses. Otherwise, the cookies could overwrite each other. Specify how many days the cookie shall exist on the visitor's computer. If your separate forms have different field names for the same information, you specify those here. This allows fields with different names to pre-fill the information. The example page demonstrates the above. The Form's ACTION Tag The form's ACTION tag needs to have: A name="formname" attribute. Change "formname" to any name for the form that makes sense to you. An onSubmit="RememberFormFields('formname','_____" attribute. Replace formname with the name you gave the form. Replace _____ with a list of this form's fields that you want the browser to remember so it can pre-fill those fields in this and other forms. The form field names are separated with a comma, like fieldname1,fieldname2,fieldname3 The demonstration page has examples. The JavaScript Below the Form Three lines of JavaScript need to be put below the form. It doesn't matter where below the form, so long as it's after the tag. This Java causes the form fields to be pre-filled in, which is the reason the code needs to be below the form. If the code were above the form, the browser might try to execute the JavaScript before the form is loaded. Here is an example of the three lines of JavaScript: <script type="text/javascript" language="JavaScript"><!-- PopulateFormFields('formname','_____\ //--></script> Replace formname with the name you gave the form. Replace _____ with a list of this form's fields that you want the browser to pre-fill. The form field names are separated with a comma, like fieldname1,fieldname2,fieldname3 Note: The information between the parenthesis should be exactly the same as the information between the parenthesis of the "onSubmit" attribute in the ACTION tag. The demonstration page has examples. A Limitation When deciding which form fields to pre-fill in, take into consideration that cookies larger than 4k might not be accepted by the visitor's browser. (To see how much that is, create a plain text file and add to or delete from it until the file size is 4k.) (The plain text version of this article is a bit over 6k in size.) 4k is more than you're likely to need if you're keeping track of only a few items of information, such as name and email -- even if you have dozens of forms and each form has different field names for the same information. If you're keeping track of many form fields, especially if some of those fields are text areas that invite lots of information, keep the 4k limit in mind. Additional technical information about cookies is at http://www.netscape.com/newsref/std/cookie_spec.html Conclusion To make things easier for your site visitors, pick up the source code and Put the large block of JavaScript code into the HEAD area of your web page. Verify the custom information is correct. Modify the FORM tag of your forms. Add three lines of JavaScript below your form. That's it. Test it, of course. Once satisfied that it works as it's supposed to, go live. Will Bontrager About the Author: Copyright 2003 Bontrager Connection, LLC William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:[email protected] Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee. Content Provided By:

More Master Series Articles...

• Cascading Style Sheets
• Changing Dropdown Content On The Fly
• Counting And Math With Javascript
• Disabling Enabling Form Fields Dynamically
• Dropdown Navigation Menu Generator
• Dynamic Subordinate Listbox
• Easy Iframe Slide Show
• Encoding Text For Web Pages
• Form Input Validation And Correction
• Form Submissions Without Submit Buttons
• How Spammers Hijack Your Forms
• I Made A Form What Do I Do Now
• It Kicks In When Visitors Leave Your Site
• Latin 1 Entities
• Many Actions With One Form Submission
• Master Page Landing Notice
• Master Password Generator V1
• Master Series Template
• Moving Cgi Scripts To A New Server
• Pre Fill Forms From Last Use
• Secure Servers
• Simple Clickbank Authentication
• Snooping Around
• Spring Cleaning Your Web Site
• The $49 Web Site Replicator
• When A Browser Refuses To Provide Referrer Information

Frontpage, NT are Trademarks of Microsoft Corporation. CompanyWeb Site Copyright (c) 1998 - 2003, CompanyWeb.net Site Development Service Group.