List of Topics

SfC Home > Web Design > SQL > ColdFusion >

 

Using Drop-Down Lists in ColdFusion

by Ron Kurtus (15 March 2001)

Drop-down lists or menus are often used to facilitate selections when entering data. Programming those lists in ColdFusion can be tricky, especially when you are using data from multiple tables in the database.

Questions you may have include:

This lesson will answer those questions.



Standard drop-down list

A standard drop-down list or menu, as part of a form, looks like:

The HTML code for this is:

<FORM METHOD="POST" ACTION="nextpage.cfm">
<SELECT SIZE="1" NAME="Fruits">
<OPTION>Select an item</OPTION>
<OPTION VALUE="apples">Apples</OPTION>
<OPTION VALUE="oranges">Oranges</OPTION>
<OPTION VALUE="peaches">Peaches</OPTION>
</SELECT>
<INPUT TYPE="submit" VALUE="Submit Fruit">
</FORM>

FORM... ACTION is the page where you will send the results of your selection.

SELECT... NAME is the name of the variable being posted or the record or column of the table in the database.

OPTION... VALUE is the value of the variable being sent. For example, Apples could be inserted in the Fruits column.

ColdFusion drop-down list

If these items are in a database, you can use ColdFusion to display them, instead of writing each out individually. Obviously, the page must be a .CFM page instead of .HTM or .HTML.

To do this, first you must make a query:

<CFQUERY NAME="list" DATASOURCE="plants">
SELECT * FROM FruitList
</CFQUERY>

Then the output is stated within the form:

<FORM METHOD="POST" ACTION="nextpage.cfm">
<SELECT NAME="Fruits">
<OPTION>Select an item</OPTION>
<CFOUTPUT QUERY="list">
<OPTION VALUE="#fruit#">#fruit#</OPTION>
</CFOUTPUT>
</SELECT>
<INPUT TYPE="submit" VALUE="Submit Fruit">
</FORM>

Note that the list comes from the FruitList table, but the selection will be going to the Fruits database table.

Location of <CFOUTPUT>

Note the location of <CFOUTPUT>. If it is located anywhere else, you will get unusual results.

Clicking button without selecting

Now, a problem can occur if the user would click the Submit Fruit button without making a selection, especially if the result is to be input into a database. One solution is to set the VALUE of that option to some default.

Drop-down for editing

Suppose you had a page to edit a record, using a drop-down list. In such a case, you would have to have two queries and two outputs.

The first query selects a specific fruit, sent through a form from the previous page.

<CFQUERY NAME="item" DATASOURCE="plants">
SELECT * FROM Fruits
WHERE fruitID = #form.fruitID#
</CFQUERY>

 The second query selects all fruits from the FruitList table.

<CFQUERY NAME="list" DATASOURCE="plants">
SELECT * FROM FruitList
</CFQUERY>

The first output shows the selection and gives its value, in case no new selection is made. Then the second output finishes the drop-down list with all the choices from the query.

<FORM METHOD="POST" ACTION="nextpage.cfm">
<SELECT SIZE="1" NAME="Fruits">

<CFOUTPUT QUERY="item">Selection = #fruit#<BR>
<OPTION VALUE="#fruit#">Change Selection</OPTION>
</CFOUTPUT>

<CFOUTPUT QUERY="list">
<OPTION VALUE="#fruit#">#fruit#</OPTION>
</CFOUTPUT>

</SELECT>
<INPUT TYPE="submit" VALUE="Submit Fruit">
</FORM>

Summary

You can use a standard drop-down list to send variables to a ColdFusion page to insert or update a database. You can populate the list, from a ColdFusion query. When editing a database field or column, you can show the present value and provide a list for a new selection. Two queries are used from different tables.


Congratulate yourself when you do good programming


Resources and references

Ron Kurtus' Credentials

Websites

ColdFusion Resources

Books

Top-rated books on ColdFusion


Questions and comments

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. I will try to get back to you as soon as possible.


Share

Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:

 

Students and researchers

The Web address of this page is:
www.school-for-champions.com/coldfusion/
drop_down_lists.htm

Please include it as a link on your website or as a reference in your report, document, or thesis.

Copyright © Restrictions


Where are you now?

School for Champions

ColdFusion topics

Using Drop-Down Lists in ColdFusion




ColdFusion topics

Basics

Development methods

Specific applications

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



The School for Champions helps you become the type of person who can be called a Champion.