Solved

Dynamic menus using onchange and databases.

Posted on 2008-10-13
5
927 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

Superior storage. Superior surveillance.

WD Purple drives are built for 24/7, always-on, high-definition security systems. With support for up to 8 hard drives and 32 cameras, WD Purple drives are optimized for surveillance.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
oracle query help 18 78
php mysql if then statement syntax 4 27
Nameserver and MX Record 2 46
WEB Farm 6 26
SQL Command Tool comes with APEX under SQL Workshop. It helps us to make changes on the database directly using a graphical user interface. This helps us writing any SQL/ PLSQL queries and execute it on the database and we can create any database ob…
Shadow IT is coming out of the shadows as more businesses are choosing cloud-based applications. It is now a multi-cloud world for most organizations. Simultaneously, most businesses have yet to consolidate with one cloud provider or define an offic…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now