Custom Web Design by Rainbo Design

Pre-Populate Forms With JavaScript

When you design a webpage and you want to pre-populate a form with specific values that might change with circumstances, it can be challenging. The ability to pre-populate forms is especially useful when you want to send the user from one form to another and retain or accumulate the data along the way.

The script "preset.js" examines the URL to see if it includes a query string. If so, that query string is used to preset the options in the selection lists in this form. The JavaScript is as simple and compact as I could make it. Just insert the form name/ID in the function call to "populate()" in an "onload" attribute in the <body> tag of your webpage that contains the form to be pre-populated. The script supports multiple parameters in the query string so that you can preset more than one field in the form. It supports pre-populating a text field, hidden field, textarea, checkbox, select/option list or radio button. I've recently revised the script to be smaller and simpler. You can download the JavaScript with documentation by pressing the "Download" button at the bottom of this page.

Form pre-populating is most commonly done with server-side software using Perl or PHP scripts, but with the enormous popularity of AJAX, webmasters are increasingly relying on JavaScript. JavaScript is sometimes your only choice when you're working in an environment that doesn't give you convenient access to server-side scripting.

The sample form here includes the most common types of form input tags: text, select, radio, and checkbox. The form calls an example page with the form data in a query string so that you can see the supporting JavaScript in action.

Text Input: 

Select List Group: 

Radio Button Group:  1   2   3  

Checkbox Setting: 

Textarea

 


This JavaScript is provided free of charge. If you use this software on your website,
I'd appreciate it if you would post a link on your site to my scripts page as follows:

<a href="http://www.rainbodesign.com/pub/">Rainbo Design's Scripts and Tutorials for Webmasters</a>


 Download JavaScript Prepopulate Package 






Click here to return to the Rainbo Design Scripts and Tutorials menu.

Preset Form software Copyright (C) 2003-2010 by Richard L. Trethewey. All rights reserved.

Comments or Questions?
Contact Rainbo Design