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, as well as a few of the new HTML 5 input types. The form calls an example page with the form data in a query string so that you can see the supporting JavaScript in action.


  1   2   3  



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="" Rainbo Design Tools & Scripts/a

Copyright © 2005-2017 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!

  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!