Pre-Fill and Multi-Page Forms with JavaScript

When information is passed in a URL parameter to a web page, JavaScript in the web page can pre-fill form fields.

To help heads stop spinning, let's use this URL as an immediate example:

http://example.com/page.html?name=will&funny=sometimes

The URL goes to http://example.com/page.html with parameter information:

name=will&funny=sometimes

Does it make more sense, now? It's a regular URL, followed by a question mark, and everything after the question mark is the parameter information.

JavaScript on the web page grabs the parameter information and uses it to pre-fill certain form fields.

Specifically, the JavaScript pre-fills the field name="name" with value "will" and the field name="funny" with value "sometimes".

But, Why?

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

   The URL to your form has a parameter with the item name. Example link URL:

   http://example.com/request.html?item=widget
   
   

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

   The URL can be on other websites, published in email, even bookmarked, and still work like it's supposed to. Example link URL:

   http://example.com/subscribe.html?aff=MyID
   
   

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

   The "recommend" link can be anywhere, with the correct URL in the parameter information. The recommend form processing software then has the information available when the recommendation is sent out. Example link URL:

   http://example.com/send.html?url=http://example.com/book.html
   
   

4. To make a multi-page form.

   All forms of the set, except the final one, use method="GET" in the form tag. The method automatically causes the correct URL to be put into the browser's address bar. Destination forms would have fields, probably hidden fields, to hold the information received in the parameter — which is then sent along as parameter information in the URL to the next form.

Those are some examples.

For certain situations, pre-filling form fields can make it easier for the site visitor. For other situations, hidden fields can be assigned values that give you, the site owner, information you wouldn't otherwise have.

(Pre-filling fields for the visitor and assigning values to hidden fields can use the same mechanism.)

This is one of those simple things (once you see it working) that a person can find all kinds of uses for — now that the technique is known.

The JavaScript

The JavaScript is below.

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2006 Bontrager Connection, LLC
function FillForm() {
// Specify form's name between the quotes on next line.
var FormName = "MyForm";
var questionlocation = location.href.indexOf('?');
if(questionlocation < 0) { return; }
var q = location.href.substr(questionlocation + 1);
var list = q.split('&');
for(var i = 0; i < list.length; i++) {
   var kv = list[i].split('=');
   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,'\\"');
      }
   eval('document.'+FormName+'.'+kv[0]+'.value="'+kv[1]+'"');
   }
}
FillForm();
//-->
</script>

Specify your form's name where indicated and paste the JavaScript somewhere below your form. That's all it takes to enable this feature.

Whenever the page is loaded with a URL parameter, the JavaScript will scan the parameter for names matching form fields and, when found, pre-fill in those fields with the name's value.

If the page is loaded without a URL parameter, the JavaScript just doesn't try to pre-fill form fields; no error message is spawned.

Note: The JavaScript can assign values to type="text", type="hidden", type="password", type="submit", and textarea form fields. Selection and check fields aren't supported.

A Multi-Page Form Example

Let's do a simple 2-page form as a working example.

The first form gathers the user's email address. This first form is submitted to the second form, where additional information is gathered - a name, username, and password.

The form field for the email in the first form is name="email", identical to the field name that will be pre-filled in on the second form.

Here is the first form of our example:

<form method="GET" action="nextstep.html">
Your Email: 
<input type="text" name="email" size="33">
<input type="submit" value="Next Step">
</form>

This form, being the first of the series, does not need the JavaScript. Notice that the form submits to nextstep.html with method GET.

When it is submitted, the URL in the browser's address bar will have a parameter containing the email address the user provided. The URL might look something like this:

http://example.com/nextstep.html?email=will%40example.com

(The %40 will be converted to a @ character when the information arrives at nextstep.html)

Here is the second form, to be put on a web page with file name nextstep.html:

<form 
   name="MyForm" 
   method="POST" 
   action="http://example.com/cgi-bin/script.cgi">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>Your Name:</td>
<td><input type="text" name="name" size="33"></td>
</tr>
<tr>
<td>Your Email:</td>
<td><input type="text" name="email" size="33"></td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" name="username" size="33"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" size="33"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Create Account"></td>
</tr>
</table>
</form>

Paste the JavaScript presented earlier below this second form. The JavaScript will then pre-fill the email address that was typed into the first form.

Note that the type="text" name="email" field could instead be type="hidden". The form user probably won't need to see the email address again — unless you want to present an opportunity to correct any typing errors.

The above example is a working 2-page form. Using it as a guide, forms spanning many pages can be created.

Recap

This has been fun.

All you need to do is paste the JavaScript below your form, and make sure the form name is correct in the JavaScript.

The only easier way is to hire it done.

Will Bontrager