Pre-fill Forms With Lots Of Content

The "Pre-Fill and Multi-Page Forms with JavaScript" article describes a way to pre-fill forms by clicking a link.

The article lists a few reasons for doing so:

1. To pre-fill a "request for information" form field with the item that more information is being requested about.

2. To pre-fill an affiliate code in a subscription form field.

3. To pre-fill another page's URL in a "recommend this web page" form field.

4. To make a multi-page form.

It works well, so long as the amount of text to be pre-filled does not exceed 1k or, for some servers, 256 bytes. There is a limit to how much information can be sent with URL parameters. The limit depends on the server.

If the amount of information to be sent to the form for pre-filling exceeds or might exceed the URL parameter limit for your server, a cookie can be used to transport the information to the page with the form.

JavaScript then gets the information from the cookie and pre-fills the form with it.

Using Cookie And JavaScript To Pre-Fill Form

This method can be used to pre-fill forms with any amount of information up to about 4k. Cookie size is limited to 4k.

Several reasons for using this method are to pre-fill a form with:

1. A product number and its verbose description.

2. A letter template for editing before sending.

3. A complete affiliate ad or blog post that may be edited before sending.

When a link is clicked on one page, a form on another page is pre-filled with certain information.

Implementing The Form Pre-fill Code

Four things need to be done on two pages to implement this feature.

1. The page with the form:

   1. Paste some JavaScript code into the page.

2. The page with the link:

   2. Paste some JavaScript code into the page.

   3. Put the information for pre-filling the form into divs (or other HTML containers like span, p, or td), each with a unique id and a name.

   4. Create the link to be clicked for loading the page with the form pre-filled.

Setting up the page with the form.

For purposes of these instructions, we'll assume you have the following form on your page.

<form name="MyForm" method="post" action="/cgi-bin/script.cgi">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>Your Name:</td>
<td><input type="text" name="name" style="width:400px;"></td>
</tr>
<tr>
<td>Your Email:</td>
<td><input type="text" name="email" style="width:400px;"></td>
</tr>
<tr>
<td>Item:</td>
<td><input type="text" name="item1" style="width:400px;"></td>
</tr>
<tr>
<td valign="top">Description:</td>
<td><textarea name="description1" cols="40" rows="7" style="width:400px;"></textarea></td>
</tr>
<tr>
<td>Item:</td>
<td><input type="text" name="item2" style="width:400px;"></td>
</tr>
<tr>
<td valign="top">Description:</td>
<td><textarea name="description2" cols="40" rows="7" style="width:400px;"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Submit Information" style="width:400px;"></td>
</tr>
</table>
</form>

If your form is different than the above, modify the instructions accordingly.

Note the form name (in the <form...> tag). That name will be specified in the JavaScript.

Note also the form field names "item" and "description". Those fields will be pre-filled.

Form fields that can be pre-filled are input type="text" and the textarea fields, as above, and also input type="hidden" and input type="password" fields.

Somewhere below the form, paste this JavaScript.

<script type="text/javascript"><!-- 
// Copyright 2009 Bontrager Connection, LLC
// https://www.willmaster.com/library/

// Put this JavaScript somewhere below the form to be pre-filled.

// Cookie name must be identical to CookieName specified on 
//    the page with the link to this page.
// Specify the cookie name between the quotes on the next line.
var CookieName = "MyCookie";

// Specify the form name between the quotes on next line.
var FormName = "MyForm";

// No other customizations required.
function PreFillForm() {
var q = '';
if(document.cookie.length > 0) {
   var cookiename = CookieName + '=';
   var cookiebegin = document.cookie.indexOf(cookiename);
   var cookieend = 0;
   if(cookiebegin > -1) {
      cookiebegin += cookiename.length;
      cookieend = document.cookie.indexOf(";",cookiebegin);
      if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
      q = document.cookie.substring(cookiebegin,cookieend);
      }
   }
if(q.length > 0) {
   var list = q.split('&');
   for(var i = 0; i < list.length; i++) {
      var kv = list[i].split('=');
      if(kv[1].length > 0) {
         kv[0] = unescape(kv[0]);
         if(! eval('document.'+FormName+'.'+kv[0])) { continue; }
         kv[1] = unescape(kv[1]);
         if(kv[1].indexOf('"') > -1) {
            var re = /"/g;
            kv[1] = kv[1].replace(re,'\\"');
            }
         if(kv[1].indexOf('\n') > -1) {
            var re = /\n/g;
            kv[1] = kv[1].replace(re,'\\n');
            }
         eval('document.'+FormName+'.'+kv[0]+'.value="'+kv[1]+'"');
         }
      }
   }
}
PreFillForm();
//--></script>

The JavaScript needs customization in two places:

1. The CookieName value. Specify the cookie name to be used to temporarily hold the form pre-fill information. The name specified here must be the same as the CookieName value in the JavaScript on the page with the link to the form page.

2. The FormName value. Specify the form's name (found in the <form...> tag as name="______").

This page is now ready to go.

Make a note of this page's URL. The URL will be needed on the page with the link.

Setting up the page with the link.

We'll set up a working example page.

First, paste this JavaScript somewhere on the page, either in the head or the body area.

<script type="text/javascript"><!-- 
// Copyright 2009 Bontrager Connection, LLC
// https://www.willmaster.com/library/

// Put this JavaScript somewhere above the first link to the form page.

// Cookie name must be identical to CookieName specified on 
//    the page with the form.
// Specify the cookie name between the quotes on the next line.
var CookieName = "MyCookie";

// No other customizations required.
function StoreFormPreFillInformation() {
var cookie = new Array();
for(var i = 0; i < StoreFormPreFillInformation.arguments.length; i++) {
   var kv = StoreFormPreFillInformation.arguments[i].split("=");
   if( ! kv[1] ) { continue; }
   var id = document.getElementById(kv[1]);
   if( ! id ) { continue; }
   var k = escape(kv[0]);
   var v = escape(id.innerHTML);
   cookie.push(k+"="+v);
   }
if(cookie.length > 0) { document.cookie = CookieName + "=" + cookie.join("&") + "; path=/"; }
return true;
}
//--></script>

The JavaScript needs customization in one place: The CookieName value specified here must be the same as the CookieName value in the JavaScript on the page with the form.

Next, put this somewhere on the page.

<p><b>Demonstration</b></p>

<div id="item1description">This is the description paragraph 
for item "flashlights."</div>

<div id="item2description" style="display:none;">This is the description paragraph 
for item "candles."</div>

<p>
One of the items is 
<span id="item1name">flashlights</span> 
and the other item is 
<span id="item2name" style="font-style:italic;">candles</span>.
</p>

The two div tags each contain an item description.

The two span tags in the paragraph below the divs each contain an item name.

When the link is clicked (see further below) the JavaScript will store both descriptions and both names in a cookie. When the browser gets to the page with the form, the JavaScript on that page will pre-fill the form with that information.

The ids assigned to the div and span tags can be any valid id so long as each is unique on the web page.

To demonstrate how it is done in case your implementation wants something similar, one of the divs has a style hiding the content and one of the spans has a style italicizing the content.

Notice the absence of line feeds at the beginning and end of the content. Firefox (and possibly other browsers, but not IE) would treat the leading and trailing line feeds as part of the content to pre-fill the form with. If the pre-fill field is not a textarea field, a leading line feed would prevent the rest of the content from being visible.

Line feeds in the middle of the content get sent along. It's just the leading and trailing line feeds that are treated differently depending on which browser is used.

Last, create the link.

This is the format for the link:

<a href="http://example.com/formpage.html" 
   onclick="return StoreFormPreFillInformation(__________)">
   

Two things need to be done with the link.

1. The href URL needs to be changed to the URL of the page containing the form to be pre-filled.

2. The underscore in the function StoreFormPreFillInformation() parameter (the part between the parenthesis) needs to contain the information with which to construct a cookie for pre-filling the form.

How to construct the function StoreFormPreFillInformation() parameter:

To construct the parameter for the function, two items of information need to be known about each form field to be pre-filled.

1. The form field name to be pre-filled.

2. The id value where the information is to be copied from.

The field name/id value pairs are constructed like this:
'FormFieldName=ContentIdValue'

The part on the left of the equal sign is the form field name to be pre-filled. The part on the right of the equal sign is the id of the tag containing the information to pre-fill the form with. The set is between single quotes.

You can set it up for as many sets as you want.

Multiple sets are separated with a comma. There may be line feeds and/or other white space between the comma and the following set, like in the example link below.

In this article's example, there are four sets. Form field name item1 will be pre-filled with the information at id="item1name". The other three sets are for form fields description1, item2, and description2.

Here is the link:

<p>
When ready, 
<a href="http://example.com/formpage.html" 
   onclick="return StoreFormPreFillInformation(
             'item1=item1name',
             'description1=item1description',
             'item2=item2name',
             'description2=item2description')">
click here.
</a>
</p>

Change the URL in the link to the URL of the page with the form to be pre-filled. Then, you're good to go.

Put the pages on your server, load the page with the link, and click on it. The browser will then go to the page with the form and pre-fill part some of the fields.

Pre-filling forms with information from the page with the link - a recap.

Both the page with the link and the page with the form have their own JavaScript.

The information to be pre-filled is in HTML container tags like div, span, p, or td, on the page with the link. The tag has a unique id.

The link to the page with the form to be pre-filled contains the form field name and the id of the information.

When the link is clicked, a cookie is constructed and sent to the browser. The cookie, including the cookie name and all the information stored with it, is limited to 4k, a tad over 4000 characters. When trying to store a cookie larger than the limit, the browser may concatenate the cookie or not store it at all.

(For a visual reference, this article - not including copy 'n paste code and HTML tags - is under 12k in size. About a third of it would fit in a cookie.)

When the browser loads the page with the form, certain form fields are pre-filled with the information stored in the cookie.

Will Bontrager