Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Programmatically Populating HTML forms made easy

0.00/5 (No votes)
9 Dec 2000 1  
A simple way to separate your design from your scripting when populating forms with data.
  • Download source files - 3 Kb
  • 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.

      <!-- ********** 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()
      %>
    

    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