Click here to Skip to main content
Click here to Skip to main content

Programmatically Populating HTML forms made easy

, 9 Dec 2000
Rate this:
Please Sign up or sign in to vote.
A simple way to separate your design from your scripting when populating forms with data.
  • Download source files - 3 Kb
  • <!-- Article Starts -->

    Introduction

    Adding an 'edit' feature to a web site (i.e. editing registration information, updating content, modifying a shopping cart list) requires that HTML forms are built that are populated with the data that is to be edited. One of the worst things about populating an HTML form with data is the fact that the HTML and ASP script need to be mixed together. Example

    First Name: <input name="FirstName" value="<%=recSet("FirstName")%>">

    This creates very messy code, and makes it a real pain to update the look and feel of the form once the script is added.

    There are several problems with this type of coding:

    • Anyone who designs the form must know ASP scripting.
    • The form cannot be editing in a WYSIWYG designer after the script has been added.
    • More processing time is required at the server due to the context switching between the HTML and script. Although all of the code can be put inside Response.Write functions, it creates an even more unmanageable mess.
    • During the design phase of the form, the amount of work required to update it is many times that of editing an HTML file alone.

    With a set of functions calledAutoForm, all of these problems disappear, and it is even easier to do than the old way... honest.

    Here are the basic steps

    1. Create the HTML page with a form (or multiple forms)
    2. Create an ASP page that includes the above form in an #INCLUDE statement
    3. Add the AutoForm.asp function file using an #INCLUDE statement
    4. Call a single function for each item on the form you want populated
    5. You are now finished!

    So in effect the HTML page acts as a template that our ASP page will load and populate. No modifications to the HTML page are required whatsoever, allowing the HTML page to be updated freely without disturbing the script. Below is a sample of an ASP page that will load an HTML template page.

      <!--<span class="code-comment"> ********** Add Form Template File below ********** -->
      <!-- #INCLUDE FILE ="my_form.htm" -->
      <!-- ********** Auto Form Functions ********** -->
      <!-- #INCLUDE FILE ="autoForm.asp" -->
      
      <%' load the data into the form using the AutoForm functions
    	StartAutoForm("MyForm1") ‘name of the form to load
    
    	SetSelection "Age","30"	
    	SetTextBox "FirstName", "Troy"	
    	SetTextBox "LastName", "Marchand"
    	SetCheckBox "Working", true
    	SetRadioButton "Mood" ,"Great"	
    	ClearSelection "Numbers"  'for multi-select boxes, it is a good idea to clear them first
    	SetSelection "Numbers", "2"
    	SetSelection "Numbers", "4"
    	
    	EndAutoForm()
      %>
    </span>

    Although the values are hard coded in this example it would be just as easy to use a record set to populate the form.

    The only stipulation on the HTML page is that each element in the form needs to be named, since all of the functions require a form element name as the first parameter. The names used must also be agreed to by the HTML designer and the ASP developer, since they will need to be used in both places.

    Function List

    StartAutoForm( formName)

    Must be called before any of the other AutoForm functions are called.

    If multiple forms need to be populated, call this function to set the form that will be popluated.

    Params

    formName - name of the form to be popluated

    EndAutoForm()

    Must be called after a form has been populated with the AutoForm functions.

    If another form within the same page needs to be popluated, call this function before calling StartAutoForm again.

    SetTextBox( fieldName, value)

    Popluates the specified textbox.

    Params

    fieldName - name of element to populate value - value to set into the field

    SetSelection( fieldName, value)

    Selects the specified item in the specified select box.

    This function can be used for single and multi-select styles. If populating a multi-select box then ClearSelection should be used to ensure that the default selection is cleared.

    Params

    fieldName - name of select element to populate
    value - item to be selected

    SetRadioBuffon( fieldName, value)

    Selects the specified radio button in a group of radio buttons.

    Params

    fieldName - name of select element to populate
    value - radio button to be selected

    ClearSelection( fieldName)

    Clears all selections from the specified select box.

    Params

    fieldName - name of select box to clear

    SetCheckBox(fieldName, bChecked)

    Checks, or un-checks the specified checkbox element.

    Params

    fieldName - name of checkbox to check/un-check
    bChecked - set to ‘true’ to check, or ‘false’ to un-check

    License

    This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

    A list of licenses authors might use can be found here

    Share

    About the Author

    Troy Marchand
    Web Developer
    Canada Canada
    Troy Marchand is VP of Product Development at Dundas Software.

    Comments and Discussions

     
    GeneralForm submit to server PinmemberAjay Kale New18-Oct-10 23:04 
    Generalthis is cool, but Pinmembertbbooher23-Mar-02 12:49 
    GeneralRe: this is cool, but PinsitebuilderTroy Marchand25-Mar-02 7:23 
    GeneralRe: this is cool, but Pinmembertbbooher25-Mar-02 14:07 
    GeneralRe: this is cool, but PinmemberJonathan Craig19-Apr-02 8:29 
    GeneralRe: this is cool, but Pinmemberdougcranston16-Apr-03 5:40 
    GeneralServer side scripting is no fun PinmemberPaul Wolfensberger11-Dec-00 4:05 
    GeneralRe: Server side scripting is no fun PinmemberTroy11-Dec-00 5:30 
    GeneralRe: Server side scripting is no fun PinmemberPaul Wolfensberger11-Dec-00 6:36 
    GeneralRe: Server side scripting is no fun PinmemberChris Maunder11-Dec-00 10:50 
    GeneralRe: Server side scripting is no fun PinmemberPaul Wolfensberger11-Dec-00 12:23 
    GeneralRe: Server side scripting is no fun PinmemberDavid Cunningham14-Dec-00 13:58 
    GeneralRe: Server side scripting is no fun PinmemberPaul Wolfensberger14-Dec-00 16:53 
    GeneralRe: Server side scripting is no fun PinmemberDavid Cunningham15-Dec-00 10:58 
    GeneralRe: Server side scripting is no fun PinmemberChris Maunder15-Dec-00 13:02 
    GeneralClient-side JavaScript PinmemberUwe Keim10-Dec-00 20:41 
    GeneralRe: Client-side JavaScript Pinmembertoni navarro11-Dec-00 17:37 

    General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

    Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

    | Advertise | Privacy | Terms of Use | Mobile
    Web01 | 2.8.150302.1 | Last Updated 10 Dec 2000
    Article Copyright 2000 by Troy Marchand
    Everything else Copyright © CodeProject, 1999-2015
    Layout: fixed | fluid