# 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:

- Use the CFQUERY tag to retrieve the column data from a database table.
- Use the CFOUTPUT tag with the QUERY attribute within the SELECT tag to dynamically populate the OPTIONS of this form control.

| 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.