(Get Attention Ticker for your web site)

Pre-Fill and Multi-Page Forms with JavaScript

By Will Bontrager

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

(Click here for the complete article.)

The JavaScript With Commented Steps

For those who are interested in how the JavaScript works, here is a repeat of the code presented in the article, but heavily commented for clarity.

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2006 Bontrager Connection, LLC
//
// Put JavaScript somewhere below the form.
//

// The function that does the work.
function FillForm() {

//
// To customize your form, specify form's name 
//   between the quotes on the next line.
var FormName = "MyForm";

// Find the location of the ? in the URL.
var questionlocation = location.href.indexOf('?');

// If no ?, return out of the function.
if(questionlocation < 0) { return; }

// Assign the text following the ? to variable q
// The text might look something like (just an example):
//   name=will%20%22B%22&email=will%40example.com&fun=yes
var q = location.href.substr(questionlocation + 1);

// Split q on & characters and assign to array variable list.
// (In other words, chop the string at each & character 
//    and store the pieces in an array variable named list.)
// The array elements, using the above example, are:
//      name=will%20%22B%22
//      email=will%40example.com
//      money=enough
var list = q.split('&');

// For each element of array list, execute the {} block.
for(var i = 0; i < list.length; i++) {

   // Split the list array element on = character and 
   //   assign the pieces to array variable kv.
   // kv[0] will then contain the field name and kv[1] 
   //   will contain the field value.
   var kv = list[i].split('=');

   // If the form does not have a field name kv[0], 
   //   go to the top of the {} loop and continue there.
	if(! eval('document.'+FormName+'.'+kv[0])) { continue; }

   // Convert %##'s to the actual characters.
   //    will%20%22B%22 becomes: will "B"
   //    will%40example.com becomes: will@example.com
   kv[1] = unescape(kv[1]);

   // If value kv[1] contains a " character, execute the 
   //   {} loop.
   // (The " character needs to be escaped because the 
   //   value in the eval() function below uses " for field 
   //   value delimiters.)
   if(kv[1].indexOf('"') > -1) {

      // Assign a regular expression to variable re. The 
      //   expression looks for all " characters.
      var re = /"/g;

      // In kv[1], replace each " character with: \"
      // (The \ itself needs to be escaped here.)
      kv[1] = kv[1].replace(re,'\\"');
      }

   // Create an evaluation expression for the eval() 
   //   function that assigns the value kv[1] to the 
   //   form field kv[0].
   eval('document.'+FormName+'.'+kv[0]+'.value="'+kv[1]+'"');
   }

// end of function
}

// Execute the above function to pre-fill in the form fields.
FillForm();

//-->
</script>

May 30, 2006

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

Rate this blog post.
No page reload!

WillMaster > Blog > JavaScript

Subscribe to
the Possibilities Ezine

RSS feed links

Blog Article Categories

Pre-Fill and Multi-Page Forms with JavaScript

WillMaster > Blog > JavaScript

Subscribe tothe Possibilities Ezine

RSS feed links

Blog Article Categories

Pre-Fill and Multi-Page Forms with JavaScript

Subscribe to
the Possibilities Ezine