Shaun Mccran

My digital playground

10
A
U
G
2009

Connecting Select form fields based on data selections Pt 1

Whilst building a new form I discovered that I needed two select fields, one that contained a series of publication titles, and the second that contained the Issue numbers of whatever title was selected in the first field.

IE two selects, with the first controlling the seconds data.

I had a search around and it seems like there are many ways to do this, this by far seems to be the best, but it has a fatal flaw (detailed at the end).

Start off by creating a function call to setup your initial state. This will set the default value of the first select field, and populate the second field with its options.

view plain print about
1<body>
2<!--- Set the default Series --->
3<cfset defaultSeries = 7>
4
5<scri pt type="text/javascript">
6var done = false;
7function SelectDefault(x,val) {
8 if(!done) {
9 var dd = document.getElementById('intId');
10 for(var i = 0; i < dd.length; i++){
11 if(dd.options[i].value == val){
12 dd.selectedIndex = i;
13 }
14 }
15 done = true;
16 }
17}
18</scri pt>

Next create the form, and use the cfajaxproxy to bind the default values set above.

The form itself is a pair of cfselects, with the values bound to the response from a CFC (Series). I really like the way the notation works with this, the cfc:Name . function is really intuitive.

Notice how the binding on the second cfselect is passing through the value from the first 'intId' in this example. This is the argument passed to the CFC.

view plain print about
1<!--- Proxy function --->
2<cfajaxproxy bind="javascript:SelectDefault({intId},#defaultSeries#)">
3
4<cfform name="exampleform" method="post">
5
6<cfselect name="intId" id="intId" value="intId" display="varName" bindonload="true" bind="cfc:Series.GetIssues()"/>
7<cfselect name="issueNo" id="issueNo" value="intIssueNo" display="intIssueNo" bind="cfc:Series.GetIssueNos({intId})"/>
8<cfinput type="submit" name="submit" value="Submit"/>
9</cfform>
10</body>
11</html>

So that is our form. The next code block is the CFC. It is a relatively straight forward CFC with two functions, each returning a list of data. The second requires an argument passed in from the cfselect above.

view plain print about
1<cfcomponent output="false">
2    <cffunction name="GetIssues" access="remote" returntype="query">
3
4        <cfquery name="data" datasource="#application.dsn#">
5            SELECT [intId],[varName],            
6FROM [dbo].table
7            Order by varName
8        </cfquery>
9
10        <cfreturn data>
11    </cffunction>
12
13    <cffunction name="GetIssueNos" access="remote" returntype="query">
14        <cfargument name="intId">
15 <cfquery name="data" datasource="#application.dsn#">
16            SELECT [intIssueNo]
17            FROM [dbo].table
18            where intSeriesId = <cfqueryparam value="#arguments.intId#" cfsqltype="cf_sql_integer">
19     </cfquery>
20        <cfreturn data>
21
22    </cffunction>
23
24</cfcomponent>

This just returns two different query objects. When this is all hooked up it works fantastically. Changing the first select changes the issue numbers in the second select.

My problem lies in the fact that this is all ColdFusion 8 functionality. Both cfajaxproxy and cfselect are coldfusion server version 8 tags. My hosting company is still using version 7! Which I discovered when I rolled this code out. (doh!)

So I have to find another solution, which follows shortly.

N.B. Thanks to several of Ben Forta and Ben Nadel's blog posts around similar subjects for guidance on this, they got me over a few stumbling blocks.

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Back to top