Dynamically Populating Select Boxes

In the previous chapter, you hard-coded a form's select box options.

Instead of manually entering the information on a form, you can dynamically populate a select box with database fields. When you code this way, changes that you make to a database are automatically reflected on the form page.

To dynamically populate a select box:

Note To dynamically populate a select box:
  1. Open the file formpage.cfm in Studio.
  2. Modify the file so that it appears as follows:
    <HTML>
    <HEAD>
    <TITLE>Input form</TITLE>
    </HEAD>
    <BODY>
    <CFQUERY NAME="GetDepartments" DATASOURCE="CompanyInfo">
    SELECT Location
    FROM Departments
    </CFQUERY>
    
    <!--- define the action page in the form tag. The form variables will 
    pass to this page when the form is submitted --->
    
    <form action="actionpage.cfm" method="post">
    
    <!-- text box -->
    <P>
    First Name: <INPUT TYPE="Text" NAME="FirstName" SIZE="20" 
    MAXLENGTH="35"><BR>
    Last Name: <INPUT TYPE="Text" NAME="LastName" SIZE="20" 
    MAXLENGTH="35"><BR>
    Salary: <INPUT TYPE="Text" NAME="Salary" SIZE="10" MAXLENGTH="10">
    </P>
    
    <!-- select box -->
    City
    
    <SELECT NAME="City">
    <CFOUTPUT QUERY="GetDepartments">
    <OPTION VALUE="#GetDepartments.Location#>
    #GetDepartments.Location#
    </OPTION>
    </CFOUTPUT>
    </SELECT>
    
    <!-- radio buttons -->
    <P>
    Department:<BR>
    <INPUT TYPE="radio" name="Department" value="Training">Training<BR>
    <INPUT TYPE="radio" name="Department" value="Sales">Sales<BR>
    <INPUT TYPE="radio" name="Department" value="Marketing">Marketing<BR>
    </P>
    
    <!-- check box -->
    <P>
    Contractor? <input type="checkbox" name="Contractor" value="Yes" 
    checked>Yes
    </P>
    
    <!-- reset button -->
    <INPUT TYPE="reset" NAME="ResetForm" VALUE="Clear Form">
    
    <!-- submit button -->
    <INPUT TYPE="submit" NAME="SubmitForm" VALUE="Submit">
    </FORM>
    </BODY>
    </HTML>
    
  3. Save the page as formpage.cfm.
  4. View formpage.cfm in a browser.

    The changes that you just made appear in the form.

    Remember that you need an action page to submit values.