Lets get started!

To begin lets create the following files:

1. formA.cfm - This cfm will be used for the main search form.

2. formB.cfm - This used to display our results.

3. data.cfc - This component will be used to get our data for the drop downs.

We will also use a simple database with Cities and States.

Use this to create the table, you might need to modify this depending on what type of database you are using.

Create the example table:

CREATE TABLE dbo.data (city varchar(50),state char(2))

INSERT INTO dbo.data (city, state) VALUES ('Waco', 'TX');

INSERT INTO dbo.data (city, state) VALUES ('Austin', 'TX');

INSERT INTO dbo.data(city, state) VALUES ('Dallas', 'TX');

INSERT INTO dbo.data(city, state) VALUES ('Houston', 'TX');

INSERT INTO dbo.data(city, state) VALUES ('Oklahoma City', 'OK');

INSERT INTO dbo.data(city, state) VALUES ('Tulsa', 'OK');

formA.cfm Code

Lets now get into the code! Open formA.cfm 

<cfform name = "form1" action="formB.cfm" method="Post"> 

State: <cfselect name="states" bindOnLoad="Yes" bind="cfc:data.getStates()" /> 

City: <cfselect name="city" bindOnLoad="Yes" bind="cfc:data.getCity({states})" /> 

<cfinput type="submit" name="submit" value="Search"> 

</cfform> 

Coded Explained 

Let me explain the code above.

The bindOnLoad means it will be executed when first loading the form.

The bind attribute is used to control where to get the data to bind and can also be used to pass data, in this example we are using a cfc or Coldfusion Component.

Here is the break down of the bind attribute for the states drop down: "cfc:data.getStates()" cfc means we are using a cfc. Data is the cfc we are going to use and getStates is the function inside data.cfc. We are not passing any data to the cfc.

City: "cfc:data.getCity({states})" cfc means we are using a cfc. Data is the cfc we are going to use and getCity is the function inside data.cfc. We are passing the states drop down to the getCity function.

Now that we have our form code taken care of, lets get into the cfc which is the heart of the application.

data.cfc Code

<cfcomponent output="false">
    
<cffunction name="getStates" access="remote" returntype="array">

        <cfquery
name="states" datasource="#myDN#">

        
    
SELECT
DISTINCT state FROM dbo.data
        
    
ORDER BY state
        
</cfquery>

        <cfset count="1" />
        
<cfset results = arraynew(2)>

        <cfloop query="states">
            <cfset
results[count][1]="#state#"
/>
            
<cfset results[count][2]="#state#" />
            
<cfset count= count+1>
        </cfloop>

        <cfreturn results />

    </cffunction>

    <cffunction name="getCity" access="remote" returntype="array">

        <cfargument name="state" type="string" required="true">
    
        <cfquery name="cities" datasource=
"#myDN#">
            
SELECT
DISTINCT city FROM dbo.data
            
WHERE state = '#state#'
            
ORDER
BY city
        </cfquery>
        <cfset
count="1"
/>
        
<cfset results = arraynew(2)>
    
        <cfloop query="cities">
            <cfset results[count][1]="#city#"
/>
            
<cfset results[count][2]="#city#" />
            
<cfset count= count+1>
        </cfloop>

        <cfreturn results />

    </cffunction>

</cfcomponent>

data.cfc Explained

Let me explain whats going on with the above code.

We are using two different functions, getStates and getCity, which you might remember from the cfselect bind attributes.

In the getStates we need to retrieve all the states in our table, then use a 2-D array to populate the states dropdown. As you can see the returntype for the funcation is "array".

Next the results from the query states is put into the array called results. Using a loop over the array with a counter we are able to store the results easily and return them to the states dropdown.

Now let us take a look at the getCity function. This function will be used to return the data for the city dropdown. The getCity function is driven off what is sent from the states dropdown. If you remember from the bind attribute for the city dropdown we passed the state to the getCity function. The query will now only return the cities which have the corresponding state.

About This Tutorial
Author: Micah Downing
Skill Level: Intermediate 
 
 
 
Platforms Tested: CF8
Total Views: 154,162
Submission Date: July 29, 2009
Last Update Date: July 29, 2009
All Tutorials By This Autor: 3
Discuss This Tutorial
Advertisement

Sponsored By...
Mobile App Development (IOS, Android, Cordova, Phonegap, Objective-C, Java) - Austin, Texas Mobile Apps - Touch512, LLC.