Programmatically Populating HTML forms made easy

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