Solved

Dynamic menus using onchange and databases.

Posted on 2008-10-13
5
937 Views
Last Modified: 2013-12-24
Im currently trying to program a website for a car leasing company, what Im trying to achieve is when a customer selects a manufacturer they get a drop down list with all the model names from that manufacturer, when they select a model they then get a drop down list with the specification for that model and once they have done that they get a drop down list containing all the extras they can select for that model. Its database driven and Ive toyed around with javascript and arrays and the onChange function but Im at a loss.
Im trying coldfusion coding now and this is my code so far;

this code's more complex and it reloads the page/database every time a selection is made (don't know if that's going to cause me problems at a later date ), but it seems to be working ok so far, the only javascript I'm using now is onChange "this.form.submit ()". I've managed to create two boxes that carry a varchar variable over not a primary key, so it knows what it's looking for now, as apposed to earlier.
The next problem I think Im going to encounter is setting numeric values for the selections.  Dont know how to have a figure behind the selection, because this is going to be a calculator basically, I need each option to hold a numeric value that will be calculated on the form submit.  Any ideas?  Im going to have to hold the numeric values in the database as theyre going to need updating (going to have an admin system along side this), but dont know where to pull them through in the code.
Obviously Ill have to include another column in the database to hold the number values, so if you know where to put them in the code Ill make the relevant changes to the db.

<cfif isDefined('form.select_manufacturervar')>
    <cfset page.select_manufacturervar = form.select_manufacturervar>
</cfif>
<cfoutput>
  <form name="DropDown" method="post">
  <!--- DB for the first drop down list --->
  <cfquery name="rsQuotemanufacturer" datasource="quote-system">
     SELECT *
     FROM manufacturer_table
  </cfquery>
 
 
  <!--- first drop down list --->
  <select name="select_manufacturervar" required="yes" onchange="this.form.submit()">
     <option>Select Manufacturer</option>
     <cfloop query="rsQuotemanufacturer">
         <option value="#manufacturer_ID#" <cfif isDefined('form.select_manufacturervar')><cfif form.select_manufacturervar eq "#manufacturer_ID#">selected</cfif></cfif>>#manufacturer_ID#</option>
     </cfloop>
</select>
<p>
<cfif isDefined('page.select_manufacturervar')>
   <!--- DB query for second drop down list --->
   <cfquery name="rsQuotemodel" datasource="quote-system">
        SELECT *
        FROM model_table
        WHERE sub_manufacturer_ID = <cfqueryparam value="#page.select_manufacturervar#" cfsqltype="cf_sql_varchar">
   </cfquery>
 
 
   <!--- second drop down list --->
   <select name="select_Model" required="yes" onchange="this.form.submit()">
      <option>Select Model</option>
       <cfloop query="rsQuotemodel">
         <option value="#model_ID#" <cfif isDefined('form.select_modelvar')><cfif form.select_modelvar eq "#model_ID#">selected</cfif></cfif>>#model_ID#</option>
     </cfloop>
</select>
</cfif>
<p>
<cfif isDefined('page.select_modelvar')>
      <cfloop query="rsQuotemodel">
         <option value="#model_ID#">#model_ID#</option>
      </cfloop>
   </select>
</cfif>
<!-- third drop down box --->
    <cfif isDefined('page.select_modelrvar')>
   
   <cfquery name="rsQuotemodel" datasource="quote-system">
        SELECT *
        FROM model_table
        WHERE sub_manufacturer_ID = <cfqueryparam value="#page.select_modelvar#" cfsqltype="cf_sql_varchar">
   </cfquery>
 
 
   <!--- second drop down list --->
   <select name="select_Model" required="yes" onchange="this.form.submit()">
      <option>Select Model</option>
       <cfloop query="rsQuotemodel">
         <option value="#model_ID#" <cfif isDefined('form.select_modelvar')><cfif form.select_modelvar eq "#model_ID#">selected</cfif></cfif>>#model_ID#</option>
     </cfloop>
</select>
</cfif>
<p>
<!--- if the first selection has been made, display the second drop down list with the appropriate results --->
<cfif isDefined('page.select_modelvar')>
      <!--- dynamically populate the second drop down list based on the get_Sub_Group query --->
      <cfloop query="rsQuotemodel">
         <option value="#model_ID#">#model_ID#</option>
      </cfloop>
   </select>
</cfif>
 
 
 
</form>
</cfoutput>

Open in new window

0
Comment
Question by:Uribname
  • 2
5 Comments
 
LVL 36

Accepted Solution

by:
SidFishes earned 500 total points
ID: 22702883
using the form submit in this instance probably will cause issue when you actually want to submit the form, try using the window.open

this basically reloads the page and uses url variables to set your values since it's a url string you can add multiple params


use the url values for your isdefined

<cfif isDefined('url.manufacturerid')>

 <select name="select_manufacturervar" required="yes" onChange="window.open(this.options[this.selectedIndex].value,'_self')">
     <option>Select Manufacturer</option>
     <cfloop query="rsQuotemanufacturer">
         <option value="thispage.cfm?manufacturerid=#rsQuotemanufacturer.manufacturer_ID#&manu_value=#rsQuotemanufacturer.SomeValue#.html" <cfif rsQuotemanufacturer.manufacturervar. eq url.manufacturer_ID>selected</cfif>>#manufacturer_ID#</option>
     </cfloop>
</select>
 
this value of this selection is #url.manu_value#

Open in new window

0
 

Author Comment

by:Uribname
ID: 22709669
Ok, I've got this code working to a point, but can't generate the third drop
down box, plus, when the second selection is made, and the page reloads, the
first box clears (not carrying the url across).

Any chance you could have a poke around with this and maybe point out where
I might be going wrong?  Meanwhile I'll keep playing around and see what I
can come up with.

Thanks for the help.
<!--- store the selected Main_Group variable variable after the first select boxes submits itself --->
<cfif isDefined('url.manufacturerid')>
    <cfset url.manufacturerid = url.manufacturerid>
</cfif>
<!--- test if staement--->
<cfif isDefined('url.modelid')>
	<cfset url.modelid = url.manufacturerid>
</cfif>
<cfif isDefined('url.specid')>
	<cfset url.specid = url.specid>
</cfif>
<!---end of test if statement--->
 
<cfoutput>
  <form name="DropDown" method="post">
  <!--- query DB for the first drop down list --->
  <cfquery name="get_Manufacturer" datasource="quote-system">
     SELECT *
     FROM manufacturer_table
  </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_Manufacturer" required="yes" onchange="window.open(this.options[this.selectedIndex].value,'_self')">
     <option>Select Manufacturer</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_Manufacturer">
         <option value="new.cfm?manufacturerid=#get_Manufacturer.manufacturer_ID#&manu_value=#get_Manufacturer.number#.html" <cfif isDefined('url.manufacturerid')><cfif url.manufacturerid eq "#cost#">selected</cfif></cfif>>#manufacturer_ID#</option>
     </cfloop>
</select>
<p>
<!--- if the first selection has been made, display the second drop down list with the appropriate results --->
<cfif isDefined('url.manufacturerid')>
   <!--- query DB for second drop down list, based on the selected item from the first list --->
   <cfquery name="get_Model" datasource="quote-system">
        SELECT *
        FROM model_table 
        WHERE sub_manufacturer_ID = <cfqueryparam value="#url.manufacturerid#" cfsqltype="cf_sql_varchar">
   </cfquery>
   <!--- second drop down list --->
   <select name="select_Model" required="yes" onchange="window.open(this.options[this.selectedIndex].value,'_self')">
      <option>Select Model</option>
      <!--- dynamically populate the second drop down list based on the get_Sub_Group query --->
      <cfloop query="get_Model">
         <option value="#new.cfm?modelid=#get_Model.manufacturer_ID#&manu_value=#get_Model.number#.html#" <cfif isDefined('url.modelid')><cfif url.modelid eq "#cost#">selected</cfif></cfif>>#model_ID#</option>
      </cfloop>
   </select>
</cfif>
<p>
<!---start of third testing drop down--->
<cfif isDefined('url.modelid')>
<cfquery name="get_Spec" datasource="quote-system">
SELECT *
FROM spec_table
WHERE sub_model_ID = <cfqueryparam value="#url.modelid#" cfsqltype="cf_sql_varchar">
</cfquery>
   <select name="select_Spec" required="yes" onchange="window.open(this.options[this.selectedIndex].value,'_self')">
      <option>Select Spec</option>
      <!--- dynamically populate the second drop down list based on the get_Sub_Group query --->
      <cfloop query="get_Spec">
         <option value="#new.cfm?specid=#get_Spec.model_ID#&manu_value=#get_Spec.number#.html#" <cfif isDefined('url.specid')><cfif url.specid eq "#cost#">selected</cfif></cfif>>#spec_ID#</option>
      </cfloop>
   </select>
</cfif>
<!---end of test third drop down box --->
</form>
</cfoutput>

Open in new window

0
 
LVL 36

Expert Comment

by:SidFishes
ID: 22721268
you need to continue to pass the url values in each successive select

ie:

<option value="#new.cfm?modelid=manufacturerid=#url.manufacturer_ID#&manu_value=#url.number#&manu_value=#get_Model.number#.html#"
0
 
LVL 8

Expert Comment

by:eszaq
ID: 22736557
Have you ever used <CFWDDX> tag? Check this for a starter: http://www.evolt.org/article/Creating_Dynamic_Select_Boxes/17/1324/index.html 
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Application launch issue with Apache Tomcat 5 44
sql_mode 1 24
BACKUP of mysql database from mysql server - using Coldfusion 9 37
Merging spreadsheets 8 37
Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Video by: Steve
Using examples as well as descriptions, step through each of the common simple join types, explaining differences in syntax, differences in expected outputs and showing how the queries run along with the actual outputs based upon a simple set of dem…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question