[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 975
  • Last Modified:

Dynamic menus using onchange and databases.

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
Uribname
Asked:
Uribname
  • 2
1 Solution
 
SidFishesCommented:
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
 
UribnameAuthor Commented:
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
 
SidFishesCommented:
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
 
eszaqCommented:
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now