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 script "preset.js" used by this page 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 flexible 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. The code supports multiple parameters in the query string so that you can preset more than one field in the form. It supports pre-populating text fields, checkboxes, select/option lists and radio buttons.

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

The sample form below calls an example page with the form data in a query string so that you can see it in action.

Text Input: 

Select Group: 

Priority:  1   2   3  

Optional Setting: 

 


If you use this code 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>




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

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