Static Dropdown to Dynamic Dropdown Coldfusion - html

Question

I am new here at stack overflow.
I need to create a static dropdown and then create a dynamic drop down based on the values that was chosen in the static dropdown. Just coldfusion and html. NO other fancy stuff.
So from the first drop down the user would chose: color, id, officer, school and hit "continue" button
Then on the same page or different, if color is chosen it will do a query on database and give out the results for the different colors, if id is seclected it will give a list of id numbers from a query. Same thing for officer or school, if those variables are chosen.
I can do the dropdown box, and get the queries but I am stuck in getting the results from the frist dropdown box to the queries. Below is my code:
<cfform method="POST" action="">
<select name="dropDownOne" required="yes" onchange="this.form.submit()">
<option>Select Report Type</option>
<option value="color">Color</option>
<option value="id">ID</option>
<option value="officier">officier</option>
<option value="school">school</option>
</select>
<input type="Submit" name="Continue" value="Continue">
<cfif isDefined('form.selectType')><cfif form.dropDownOne eq "color">
<option>Select Color</option>
<cfloop query="colorlist">
<option value="#color_id#"
<cfif isDefined('form.selectcenter')>
<cfif form.selectcenter eq "#color_id#">selected</cfif></cfif>>#color#</option>
</cfloop>

Answer 1

Unless you resubmit the page after each selection and requery for the dependent dropdown values, you have to use some kind of client side js and/or ajax.
I think that is what you are sort of trying to show you are doing? It is not too clear what you are trying to do; do you want the dependent dropdown to reflect what you choose and automagically change?
So you would need to have big if wraps around all the possible drop downs depending on what they picked and submitted? And why would the user only be able to choose one of these things at a time? This seems like a very cumbersome way to code it up, and a cumbersome interface.
This will show you how to wire up using cfselect, but I think it is still a bit strange how you want to do this. Are you going to save off each piece and show that or use that somewhere? Or is this just a proof of concept?
And I would probably display all the stuff all the time. A dependent drop down makes more sense for things like Car selectors (Year, Make, Model, Trim level) where each is uniquely dependent on the previous value. I am not sure what you are trying to hook together from the question you asked.
Anyway, ColdFusion does have a <cfselect> which will wire that up for you automagically, though personally I would just use jQuery/Ajax.
Here is how you might do this using the tag:
1) Don't submit your form onChange.
2) Use cfselect to wire the dropdowns together.
3) You need to have methods to call queries that are remote accessible for the binding to work.
<cfif isDefined('Form.DropDownOne')>
<!--- Do some action here --->
<cfdump var="#form#">
</cfif>
<cfform>
<label>Select A Report</label>
<cfselect name="dropDownOne" id="dropDownOne" required="yes"
<!--- The display attribute will map the "name" column to the option display text area --->
<!--- The value attribute will map "value" column to the option value (what is submitted)--->
display='name ' value='value'
<!--- The cfc should send back a query with name and value columns. --->
<!--- The dot path should point to the location of the cfc. --->
bind="cfc:com.app.code.myDropDowns.getCategories()" bindonload="true">
<option>Select Report Type</option>
</cfselect>
<label>Select A Value</label>
<cfselect name="dropDownTwo" id="dropDownTwo" required="yes"
display='name' value='value'
<!--- This method takes the value from the other drop down. --->
<!--- CF uses {} to denote the binding of the element to pass through. --->
<!--- This binding will occur automatically on any change to the dropDownOne element (including load). --->
bind="cfc:com.app.code.myDropDowns.getDetails({dropDownOne})" >
<option>Stuff</option>
</cfselect>
<input type="Submit" name="Continue" value="Continue">
</cfform>
Here I made a myDropDowns.cfc that will return a hand-built query (I do not know how/where you are storing data, so swap out with real query as you like, just return a query to the request:
component output="false" persistent="false" displayname="myDropDowns" {
structAppend(variables, Application.Seq.Objects.oCore.injectCoreMethods() );
remote function getCategories() {
var q = queryNew('');
queryAddColumn(q,'name',['Select Report Type','Color','ID', 'Officer', 'School']);
queryAddColumn(q,'value',['Select Report Type','Colors','IDs', 'Officers', 'Schools']);
return q;
}
remote function getDetails(required string Category) {
var q = queryNew('');
if(Arguments.Category == 'Colors' ) {
queryAddColumn(q,'name',['Select Value','Red','Green','Blue', 'Yellow', 'Purple']);
queryAddColumn(q,'value',['','Red','Green','Blue', 'Yellow', 'Purple']);
} else if(Arguments.Category == 'IDs' ) {
queryAddColumn(q,'name',['Select Value','123','456','789', '1011', '978']);
queryAddColumn(q,'value',['','123','456','789', '1011', '978']);
} else if(Arguments.Category == 'Officers' ) {
queryAddColumn(q,'name',['Select Value','Johnson','Fredricks','Oppenheimer', 'Davis', 'Smith']);
queryAddColumn(q,'value',['','Johnson','Fredricks','Oppenheimer', 'Davis', 'Smith']);
} else if(Arguments.Category == 'Schools' ) {
queryAddColumn(q,'name',['Select Value','Central','Northridge','Fairview', 'Daring', 'South']);
queryAddColumn(q,'value',['','CJH','NRJH','FHS', 'DHS', 'SHS']);
} else {
queryAddColumn(q,'name',['Select A Report Type First']);
queryAddColumn(q,'value',['Yeah, do that']);
}
return q;
}
}
Here are a couple of queries wrapped in cat/list methods you could modify to point at your tables that should return the same style query as the hand coded ones. Substitute your database.tablename and column names, of course.
remote function getCats() {
var q = queryNew(''); // Create empty query, not really nec. Just to initiate as query type.
var oQ = new Query(); // Create query object to execute query against your DB
try { // I like to use try-catches, make it easier to figure out what is going on sometimes....
/* You don't have to set the datasource if you set it in the Application for CF9+*/
oQ.setDataSource('myDataSource');
// Query name is only really needed if caching or requerying as it becomes part of your cache signature
oQ.setName('qMyQueryCategories');
oQ.setCachedWithin(1); // 1 == 1 day/24 hours, .5 = 12 hours, etc)
oQ.setSQL("
SELECT
T1.Id,
T1.DisplayName AS Name,
T1.Category AS Value
FROM yourDB.yourCatTableHere T1
");
q = oQ.Execute().getResult();
return q;
} catch (any err) {
/*
* Returning the error will allow you to debug in the case you have a bad query.
* You can see the result in your F12 debug network tool.
* You could optionally call an error handler to log/email the error
* but then return the empty query to the UI request so it sort of keeps functioning...
* */
return err;
}
}
remote function getList(required string Category) {
var q = queryNew('');
var oQ = new Query();
try {
oQ.setName('qMyQuery#Arguments.Category#');
oQ.setCachedWithin(.04); // Approximately 1 hour (1/24=.0417)
oQ.setSQL("
SELECT
T1.Id,
T1.Category AS Cat,
T1.DisplayName AS Name,
T1.ValueKey AS Value
FROM [yourDB.yourDetailTableNameHere] T1
WHERE T1.Category = ? ;
");
// Parameterize your sql variable. CF will take care of quoting it properly, etc.
oQ.AddParam(value=Arguments.Category, cfsqltype='CF_SQL_VARCHAR' );
q = oQ.Execute().getResult();
return q;
} catch (any err) {
return err;
}
}
Just make sure you match the method names you call in your bindings to the ones you use for each method.