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:
![]() |
To dynamically populate a select box: |
formpage.cfm
in Studio.
<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>
formpage.cfm
.
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.