I want to pass the 2 nd drop down list value[select_Sub_Group] when i select from the list box to the another form.That means to the new form.I did what you told by putting another form, but in the 3 rd form i am not getting the value.It says the error Error resolving parameter FORM.SELECT_MAIN_GROUP The specified form field cannot be found. This problem is very likely due to the fact that you have misspelled the form field name Please let me know the answer.I appriciate if you provide me the answer to me
By: Ryan BeMiller
The following tutorial was designed to be a very easy and quick way to set up dynamic drop down lists (a.k.a. select lists) that are also dependant?meaning that the second drop down list is populated based on the option that is selected from the first drop down list. I?ve looked all over for tutorials on this subject, and there are quite a few. But in my opinion, they are often far more complicated than they really need to be. Not to mention that someone new to the world of web development or programming couldn?t possibly figure out how to implement those examples for his or her own needs.
What I?ve come up with is a very simple example, which involves two queries, two drop down lists, and best of all?no JavaScript. Now, don?t get me wrong, JavaScript has its place, and could certainly help to create a more robust multiple drop down application, but it?s just not necessary to get the job done. And, it turns what should be an easy task into a difficult one for someone who?s unfamiliar with JavaScript.
For simplicities? sake, in this example I am referring to a simple database with four fields. However, this example can certainly be applied to more complex or multiple tables. It is outlined as follows:
Example Database: Our example table contains the following four fields: group_id, group_name, gubgroup_id, subgroup_name
The _id fields are standard unique identifier number fields.
The _name fields are the actual readable main group and subgroup names that correspond id numbers.
Next comes the code.
<!--- store the selected Main_Group variable variable after the first select boxes submits itself --->
<cfif isDefined('form.select_Main_Group')>
<cfset page.select_Main_Group = form.select_Main_Group>
</cfif>
Just place this code in your page where you want your drop down lists to be and that?s it.
Enjoy!
For more useful info, be sure to check out: www.pushcode.com
What I?ve come up with is a very simple example, which involves two queries, two drop down lists, and best of all?no JavaScript. Now, don?t get me wrong, JavaScript has its place, and could certainly help to create a more robust multiple drop down application, but it?s just not necessary to get the job done. And, it turns what should be an easy task into a difficult one for someone who?s unfamiliar with JavaScript.
For simplicities? sake, in this example I am referring to a simple database with four fields. However, this example can certainly be applied to more complex or multiple tables. It is outlined as follows:
Example Database: Our example table contains the following four fields: group_id, group_name, gubgroup_id, subgroup_name
The _id fields are standard unique identifier number fields.
The _name fields are the actual readable main group and subgroup names that correspond id numbers.
Next comes the code.
<!--- store the selected Main_Group variable variable after the first select boxes submits itself --->
<cfif isDefined('form.select_Main_Group')>
<cfset page.select_Main_Group = form.select_Main_Group>
</cfif>
<cfoutput>
<form name="DropDown"
method="post">
<!--- query DB for the first drop down list --->
<cfquery name="get_Main_Group"
datasource="ds">
SELECT group_id, group_name
FROM tblGroups
</cfquery>
<!--- first drop down
list --->
<!--- NOTICE the onChange javascript event in the select tag, this is
what submits the form after the first selection --->
<select name="select_Main_Group"
required="yes"
onchange="this.form.submit()">
<option>Select Main Group</option>
<!--- dynamically populate the
first drop down list based on the get_Main_Group query --->
<!--- NOTICE the CFIF within the option tag, this says,
if the first selection has been made, display the chosen option when the page
reloads --->
<cfloop query="get_Main_Group">
<option
value="#group_id#" <cfif isDefined('form.select_Main_Group')><cfif
form.select_Main_Group eq "#group_id#">selected</cfif></cfif>>#group_name#</option>
</cfloop>
</select>
<p>
<!--- if the first selection has
been made, display the second drop down list with the appropriate results --->
<cfif isDefined('page.select_Main_Group')>
<!--- query DB for second drop down list,
based on the selected item from the first list --->
<cfquery name="get_Sub_Group"
datasource="ds">
SELECT group_id, subgroup_id,
subgroup_name
FROM tblGroups
WHERE group_id = #page.select_Main_Group#
</cfquery>
<!--- second drop
down list --->
<select name="select_Sub_Group"
required="yes">
<option>Select Subgroup</option>
<!--- dynamically
populate the second drop down list based on the get_Sub_Group query --->
<cfloop query="get_Sub_Group">
<option
value="#subgroup_id#">#subgroup_name#</option>
</cfloop>
</select>
</cfif>
</form>
</cfoutput>
<!--- THAT'S ALL THERE IS TO IT! --->
For other useful info, check out:
Just place this code in your page where you want your drop down lists to be and that?s it.
Enjoy!
For more useful info, be sure to check out: www.pushcode.com
About This Tutorial
Author: Ryan BeMiller
Total Views: 70,436
Submission Date: July 27, 2003
Last Update Date: June 05, 2009
All Tutorials By This Autor: 2
Skill Level: Beginner
Platforms Tested: CF4,CF5,CFMXTotal Views: 70,436
Submission Date: July 27, 2003
Last Update Date: June 05, 2009
All Tutorials By This Autor: 2
Discuss This Tutorial
-
-
Hey...Alan! This is SUPPOSED to be an easy way of changing multiple select options. It's for people who aren't up to speed with Javascript and the like. Over 7000 people have viewed this tutorial b/c they need an easier way of doing it. If you can come up with a super easy way of doing this, without a page refresh, then by all means do it, and post the tutorial on this site! Put up or shut up. Keep your rediculous comments to yourself.
-
Any fool can do this! It's dynamically changing the select options WITHOUT a page refresh that really takes the cake.
-
I'm embarrassed, but my problem was an obvious one. I needed to change the Select Name to the variable I was passing. Thanks for your help and the tutorial.
-
If your trying to submit to a new page, you might try adding another form to the page. If the form has a different name, you can set the action attribute to whatever you want and it won't affect the first form. Does that help?
-
I'm having the same problem as Zin. I'm try to submit the result of the second query to another form, but its not passing the form variable. Any thoughts?
-
I have question about second query.. Well, how to make it link or display for clicking second result?? I am new to coldfusion but tried to separate second result into new form to display 3rd result but it seems to be ignoring my 3rd query but going back to the first on by refreshing the page when 2nd result is clicked. Help me.. thank you
-
Kevin, Yes, it would be. This could be done more efficiently, but then it wouldn't be an 'easy' tutorial would it.
-
If I read this right, this is a self submitting form and the 2nd dropdown is populated after the first selection causes the page to reload with that variable set. If so, would it not be a lot of page reloads and server calls the more dynamic the selections? Thanks, Kevin New to CF and Learning at light speed. ;-)
-
If you don't think it's correct, try removing the cfset page.select_Main_Group declaration. Then, wherever else page.select_Main_Group is referred to, change it to form.select_Main_Group. Setting page variables is just a personal practice that helps me read the code easier. It's generally not required. But, it should not be causing any errors in this tutorial.
Advertisement
