View comments | RSS feed

Dynamically populating list boxes

In "Form controls", you hard-coded a form's list box options. Instead of manually entering the information on a form, you can dynamically populate a list box with database fields. When you code this way, the form page automatically reflects the changes that you make to the database.

You use two tags to dynamically populate a list box:

To dynamically populate a list box:

  1. Open the file formpage.cfm in ColdFusion 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 DISTINCT Location
    FROM Departmt
    </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>
    
    <!-- list 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>
    <input type="radio" name="Department" value="HR">HR<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.

Reviewing the code

The following table describes the highlighted code and its function:
Code
Description
<cfquery name="GetDepartments"
datasource="CompanyInfo">
SELECT DISTINCT Location
FROM Departmt
</cfquery>
Get the locations of all departments in the Departmt table. The DISTINCT clause eliminates duplicate location names from the returned query results.
<select name="City">
<cfoutput query="GetDepartments">
<option value="#GetDepartments.Location#">
#GetDepartments.Location#
</option>
</cfoutput>
</select>
Populate the City selection list from the Location column of the GetDepartments query. The control has one option for each row returned by the query.

ColdFusion 9 | ColdFusion 8 | ColdFusion MX 7 | ColdFusion MX 6.1 | ColdFusion MX | Forums | Developer Center | Bug Reporting

Version 6

Comments are no longer accepted for ColdFusion MX. ColdFusion 8 is the current version.

Comments


Integron said on Jul 1, 2004 at 2:30 PM :
Great! Now how can you dynamically populate a second form field after you’ve selected the first one. For instance I have a list of Dealers across the US, in my form I ask them to choose their state first, next I want the second field to populate with the choices for that state only.
metalickaah said on Feb 7, 2005 at 4:02 AM :
I'm new to coldfusion, please help me with this.

my first pages passes an ID to another page which runs an query and on it's basis the second page's form fields are populated. There is a select input type. i wish to populate this with all the data available in one particular column of database with the one value corrosponding to the ID passed fropm previous page 'selected'.

the first page contains name, phone, cusine, address etc. of restaurants and thier id is displayed alongside as hyper link. on clicking a page with form appears with the value corresponding to the ID filled in the form (text type etc.)

Now the problem is in select tag, i want all the data in Cusine column, but the data corrosponding to the selected ID should be SELECTED e.g. mexican cusine, while the list should have all the other cusine in that select box.

Please help

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/coldfusion/6/Developing_ColdFusion_MX_Applications_with_CFML/formatData6.htm