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?
-
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
-
To pre-fill an affiliate code in a subscription form field.
The URL can be on other web sites, published in email, even
bookmarked, and still work like it's supposed to. Example
link URL:
http://example.com/subscribe.html?aff=MyID
-
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
-
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. (Note: The same code, but with
lots of comments on how it works, is in the
/blog/javascript/Pre-Fill_Form.html
blog post.)
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:
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:
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.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©Copyright 2006 Bontrager Connection, LLC Bontrager Connection, LLC
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.
