dynamicly linked dropdown lists

[marcmm]

Hello, I am fairly new to PHP, having just started messing around with it, but I need to solve something and I would apreciate any help any of you could offer.

Here is my problem:

There's a hardware online store built using php/html and connected to a mysql database.

It has a search function that consists of three dropdown boxes, one for firm, the second for product type, and the third for subproduct.

What I want is to make those dropdown boxes interconected, so if I select something from the first list ( the firm list ) the second dropdown box will be RE-populated with only the types of products that that firm produces ( same connection between the second and third ).

As it is now, the dropdown boxes are populated by querries, like this one ( this is for the items that will be placed in the firm dropdown box ):

$sql_combo_firma="SELECT DISTINCT firme.ID, firme.denfirma 
		  FROM firme, produse 
		  WHERE ((produse.id_firma=firme.ID) AND (produse.afisare='-1')) 
		  ORDER BY firme.denfirma ASC";

and this is for the product dropdown box:

$sql_combo_categorie="SELECT DISTINCT categorie.ID, categorie.dencategorie 
		      FROM categorie, produse 
		      WHERE ((produse.id_categorie=categorie.ID) AND (produse.afisare='-1')) 
		      ORDER BY categorie.dencategorie ASC";

Then I proceed to execute the queries:

$rez_combo_firma = MYSQL_QUERY($sql_combo_firma) OR DIE (mysql_error());
$rez_combo_categorie = MYSQL_QUERY($sql_combo_categorie) OR DIE (mysql_error());

and I count how many rows the queries have:

$linii_firma = MYSQL_NUM_ROWS($rez_combo_firma);
$linii_categorie = MYSQL_NUM_ROWS($rez_combo_categorie);

then a proceed to populate the dropdown lists:

ECHO "<SELECT NAME=combo_firma
			      ID=combo_firma 
			      STYLE='font-family: Arial; 
			      		FONT-STYLE: normal; 
				      FONT-SIZE: 11; 
				      COLOR: #000000; 
				      BACKGROUND-COLOR:#FFFFFF; 
				      BORDER-COLOR: Gray;'
		              >";

			ECHO "<OPTION VALUE = 0> Oricare </option>";

			FOR ($i=0; $i<$linii_firma; $i++)
			{
				$rez_firma_ID = MYSQL_RESULT ($rez_combo_firma,$i,'ID');
				$rez_firma_denfirma = MYSQL_RESULT ($rez_combo_firma,$i,'denfirma');

				ECHO "<OPTION VALUE = $rez_firma_ID> $rez_firma_denfirma                             
</OPTION>";
			}

		ECHO "</SELECT>";

and

ECHO "<SELECT NAME=combo_categorie
			      ID=combo_categorie 
			      STYLE='font-family: Arial; 
			      FONT-STYLE: normal; 
			      FONT-SIZE: 11; 
			      COLOR: #000000; 
			      BACKGROUND-COLOR:#FFFFFF; 
			      BORDER-COLOR: Gray;'
		              >";

			ECHO "<OPTION VALUE = 0> Oricare </OPTION>";

			FOR ($i=0; $i<$linii_categorie; $i++)
			{
				$rez_categorie_ID = MYSQL_RESULT ($rez_combo_categorie,$i,'ID');
				$rez_categorie_dencategorie = MYSQL_RESULT ($rez_combo_categorie,$i,'dencategorie');

				ECHO "<OPTION VALUE = $rez_categorie_ID > $rez_categorie_dencategorie </OPTION>";
			}
			ECHO "</SELECT>";

the page also has a submit button that will display all the results on another frame of the page:

ECHO " <INPUT TYPE = submit 
			NAME = buton_submit  
			STYLE= 'FONT-FAMILY: Arial; 
				FONT-WEIGHT: bold; 
				FONT-STYLE: normal; 				
				FONT-SIZE: 12; 
				COLOR:#000000; 
				BACKGROUND-COLOR: #FFFFFF; 
				BORDER-COLOR: Gray;'
			VALUE = ' : : :  SEARCH  : : : '>";

but I am confident that this button is not important ( the display works ok by the way, and the search works too, it's just that if you select a combination that has no resoults it will just say that there were no results. Like selecting a firm in the first box and a product in the second box that that firm dose not have. )

SO I want to make those three dropdown boxes interconected so if I select a firm in the first box, the second box will be repopulated only with the products that that firm has.

I thought about extracting the firm name ( denfirma ) and saving it in a variable and using that as a condition in the queries for the other dropdown lists. But that would not work since the queries would need to be re-executed for that to work. TO that end I thought about using the onchange event, but I don't know how to use that either.

I also searched via google for examples and several came, but they all needed addons, or other plugins to work, either they used ajax ( what ever that is ) or javascripts.

I want to know if there is any way to achieve these dynamicly linked dropdown lists without complicatted addons or classes, namelly just using php/html.

And if there isn't a way to do that I would apreciate any suggestions on how to do this because it is imperative that I solve this problem as soon as possible.

[HazardTW]

I think you need to look at client side solution to this problem at least in as much as using it for ajax calls to query the server/database, then rebuilding the drop-downs with the appropriate information.

Having the page completely reload for every menu selection change would drive even the most patient customers away with a headache.

If you have not received any useful examples by the time I get home tonight, I will post some of my examples that might give you enough information to create your own solution.

If the amount of data is not too great you might skip ajax completely and just use php to create js arrays so when the page loads, it has basically a copy of the entire database in js arrays.

[marcmm]

Yes indeed I figured that reloading the whole page is not a good idea cause that in the end would reset the fields too, so I don't think it's even a possible solution.

As stated before, I was thinking of using something like onchange ( if php has something like that ) to detect when a dropdown list has been modifyed. then take the selection from that list ( I have no idea how to referance a list selection in php... in clasic programing it was objectname.property... ) and store it in a variable.

The actual queries would have an if else statement that would detect if the user selected something from the lists ( the dropdown lists all default to showing everything, so if the selection is not equal to the standard, it would make a querry using the value stored in the variable mentioned earlyer in the condition. and if the user did not select anything, or he selected the default item it would do the default querry I listed in my original post. )

Then all that would be left would be a way in wich to re-trigger the querry execution ( not reload the whole page obviously, cause then all the stored data would be lost and all variables would reset to their default values ).

This is the solution I imagined for this, but I have no idea if what I desccrived above is even remptly possible.

Basicly I'm searching for a simple solution ( if one even exists ) that would not require branching in to other languages, or require the adition of plug-ins or classes. I'm trying to keep the coding as simple as possible.

I'd rather not use any external softwere or plug-in for this, so if this can be done in php it would be great.

As for the database, I don't know just what you refear to as "big". it's a hardwere store, it will have a bundle of firms, each with it's own products and subproducts. it won't have thousands of records...

[tkmc]

I had the same issue a few days ago, then figured it out.... however mine for for 2 drop downs not three.

Go to my thread about another issue that i actually posted the code for the whole page.

http://www.daniweb.com/forums/post709416-3.html

In mine if you drop down the Manager responsible list and select a manager it changes the ticket numbers in the next drop down with the numbers only allocated to that manager.

Hope this helps

[HazardTW]

Here is a quick example of using javascript to build/rebuild menus dynamically according to selections made.

There are three dropdowns but the first two do not change, the third changes based on the selections made in the first two, it could easily be extended to have different options in the second menu based on the first menu's selection.

It does not contain PHP or any other SERVER-SIDE code, how you get the data from the server into the javascript variables is up to you, either by having your PHP write the javascript variables into the javascript, or by using AJAX to get your data from the server and into a javascript variable without the user reloading the page.

I can't stress enough the difference between server-side and client-side scripting, what you want done with the menus really needs to be done client-side which means javascript.

A couple notes about javascript:
- variable for class is named vclass because class is a reserved word, if you use 'class' as a variable name your script will still work in Firefox but not in IE7.
- the array models[] uses a combination of the make and class to create an index key, each element of the models[] array is assigned a caret ^ delimted string because unlike PHP, javascript does not support multi-dimensional arrays, what a bummer :(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">
<!--

// ############################################################################################# //


var makes = new Array('Ford','Chevy','Dodge');

var vclass = new Array('SUV','Car','Pickup');

var models = new Array();

models['Ford_SUV'] = 'Escape^Explorer^Expedition';
models['Ford_Car'] = 'Fusion^Mustang^Taurus';
models['Ford_Pickup'] = 'Ranger^F-150^F-250 Super Duty';

models['Chevy_SUV'] = 'Suburban^TrailBlazer^Tahoe';
models['Chevy_Car'] = 'Impala^Malibu^Corvette';
models['Chevy_Pickup'] = 'Colorado^Silverado^Avalanche';

models['Dodge_SUV'] = 'Durango^Nitro';
models['Dodge_Car'] = 'Avenger^Caliber^Charger';
models['Dodge_Pickup'] = 'Dakota^Ram';


function menu_change(menu){// MAKE CLASS MODEL

	// only need to create this menu once since it will not change
	// it will be made when this function is called via onLoad="menu_change('ALL')" in the BODY element
	if (menu == 'ALL'){
		
		// get the select object for the make menu		
		var make_menu = document.getElementById('make_menu');
		
		// strip the select element of any options it may currently have
		while ( make_menu.options.length ){
			make_menu.remove(make_menu.options[0]);
		}
		
		// itterate through the global array makes that contain our vehicle mfgrs name
		for ( var i = 0; i < makes.length; i++ ){
		
			// create an option element
			var newOpt=document.createElement('option');
			
			// make the option text equal the make of the vehicle
			newOpt.text=makes[i];
			
			// try to add the option element to the select element
			try{
			
				make_menu.add(newOpt,null); // standards compliant
			
			}catch(ex){
			
				make_menu.add(newOpt); // IE only
			
			}
			
			// now that we have our new option element we can give it a value, the same as the text in this case
			make_menu.options[i].value = makes[i];
						
		}
		
		// make the first option in the new drop-down list the selected one
		make_menu.selectedIndex = 0;
		
	}
	
	// this will build the CLASS menu, it only needs to be re-built when MAKE is changed and when page loads
	// since classes is same for all makes, this menu does not need to be rebuilt, but if you had different classes 
	// options for the different makes and created arrays the same as I did for models, then this section could be 
	// modified to affect the menu changes you would need
	if (menu == 'MAKE' || menu == 'ALL'){
		
		// get the select object for the class menu		
		var class_menu = document.getElementById('class_menu');
		
		// strip the select element of any options it may currently have
		while ( class_menu.options.length ){
			class_menu.remove(class_menu.options[0]);
		}
		
		// itterate through the global array class that contain our vehicle classes
		for ( var i = 0; i < vclass.length; i++ ){
		
			// create an option element
			var newOpt=document.createElement('option');
			
			// make the option text equal the class
			newOpt.text=vclass[i];
			
			// try to add the option element to the select element
			try{
			
				class_menu.add(newOpt,null); // standards compliant
			
			}catch(ex){
			
				class_menu.add(newOpt); // IE only
			
			}
			
			// now that we have our new option element we can give it a value, the same as the text in this case
			class_menu.options[i].value = vclass[i];
						
		}
		
		// make the first option in the new drop-down list the selected one
		class_menu.selectedIndex = 0;
		
	}
	
	// this will rebuild the model menu, it needs to be built on page load, and rebuild whenever MAKE or CLASS has changed
	if (menu == 'CLASS' || menu == 'MAKE' || menu == 'ALL'){
		
		// get the select object for the model menu		
		var model_menu = document.getElementById('model_menu');
		
		// strip the select element of any options it may currently have
		while ( model_menu.options.length ){
			model_menu.remove(model_menu.options[0]);
		}
		
		// the structure for our models array is:  models['<MAKE>_<CLASS>'] = '<model>^<model>^<model>'
		// so we need to know what the current selected make and class is
		// so we can access the appropriate models array to get our list of models
		
		// get the select element for our makes menu
		var current_make = document.getElementById('make_menu');
		// get the value of the currently selected option of the menu
		current_make = current_make.options[current_make.selectedIndex].value;
		
		// get the select element for our class menu
		var current_class = document.getElementById('class_menu');
		// get the value of the currently selected option of the menu
		current_class = current_class.options[current_class.selectedIndex].value;
		
		// create our string index key for the models array we are looking for
		var index = current_make + '_' + current_class;
		
		// now that we know what models array to get we can get the '^' delimited string value and turn it into an array
		var model_list = models[index].split('^');
		
		// itterate through our local array model_list that contain our vehicle models for the currently selected make and class
		for ( var i in model_list ){
		
			// create an option element
			var newOpt=document.createElement('option');
			
			// make the option text equal the model of the vehicle
			newOpt.text=model_list[i];
			
			// try to add the option element to the select element
			try{
			
				model_menu.add(newOpt,null); // standards compliant
			
			}catch(ex){
			
				model_menu.add(newOpt); // IE only
			
			}
			
			// now that we have our new option element we can give it a value, the same as the text in this case
			model_menu.options[i].value = model_list[i];
						
		}
		
		// make the first option in the new drop-down list the selected one
		model_menu.selectedIndex = 0;
		
	}
	
	return;
}
// ############################################################################################# //

-->
</script>

</head>

<body onLoad="javascript:menu_change('ALL')">

<div>

	<select id="make_menu" onChange="menu_change('MAKE')">
		<option></option>
	</select>
	
	<select id="class_menu" onChange="menu_change('CLASS')">
		<option></option>
	</select>
	
	<select id="model_menu">
		<option></option>
	</select>

</div>

</body>
</html>

[HazardTW]

I went ahead and added different second-menu options based on the first menu selection:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">
<!--

// ############################################################################################# //

//////////////////////////////////////////////////////////////////////////////////////////////
//  THIS SECTION COULD BE WRITTEN BY PHP FROM DATABASE QUERIES
//
var makes = new Array('Ford','Chevy','Dodge');

var vclass = new Array();

vclass['Ford'] = 'SUV^Pickup^Muscle^Cars';
vclass['Chevy'] = 'SUV^Pickup^Sport^Cars';
vclass['Dodge'] = 'SUV^Pickup^Muscle^Economy^Van';

var models = new Array();

models['Ford_SUV'] = 'Escape^Explorer^Expedition';
models['Ford_Cars'] = 'Fusion^Taurus';
models['Ford_Pickup'] = 'Ranger^F-150^F-250 Super Duty';
models['Ford_Muscle'] = 'Mustang';

models['Chevy_SUV'] = 'Suburban^TrailBlazer^Tahoe';
models['Chevy_Cars'] = 'Impala^Malibu';
models['Chevy_Pickup'] = 'Colorado^Silverado^Avalanche';
models['Chevy_Sport'] = 'Corvette';

models['Dodge_SUV'] = 'Durango^Nitro';
models['Dodge_Economy'] = 'Caliber';
models['Dodge_Pickup'] = 'Dakota^Ram';
models['Dodge_Van'] = 'Caravan';
models['Dodge_Muscle'] = 'Charger';
//
//  END SECTION TO BE WRITTEN BY PHP
//////////////////////////////////////////////////////////////////////////////////////////////

function menu_change(menu){// MAKE CLASS MODEL

	// only need to create this menu once since it will not change
	// it will be made when this function is called via onLoad="menu_change('ALL')" in the BODY element
	if (menu == 'ALL'){
		
		// get the select object for the make menu		
		var make_menu = document.getElementById('make_menu');
		
		// strip the select element of any options it may currently have
		while ( make_menu.options.length ){
			make_menu.remove(make_menu.options[0]);
		}
		
		// itterate through the global array makes that contain our vehicle mfgrs name
		for ( var i = 0; i < makes.length; i++ ){
		
			// create an option element
			var newOpt=document.createElement('option');
			
			// make the option text equal the make of the vehicle
			newOpt.text=makes[i];
			
			// try to add the option element to the select element
			try{
			
				make_menu.add(newOpt,null); // standards compliant
			
			}catch(ex){
			
				make_menu.add(newOpt); // IE only
			
			}
			
			// now that we have our new option element we can give it a value, the same as the text in this case
			make_menu.options[i].value = makes[i];
						
		}
		
		// make the first option in the new drop-down list the selected one
		make_menu.selectedIndex = 0;
		
	}
	
	// this will build the CLASS menu, it only needs to be re-built when MAKE is changed and when page loads
	if (menu == 'MAKE' || menu == 'ALL'){

		// get the select element for our makes menu
		var current_make = document.getElementById('make_menu');
		// get the value of the currently selected option of the menu
		current_make = current_make.options[current_make.selectedIndex].value;
		
		//vclass['Dodge']
		// get the array of classes for the selected make
		var vclasses = vclass[current_make].split('^');		
		
		// get the select object for the class menu		
		var class_menu = document.getElementById('class_menu');
		
		// strip the select element of any options it may currently have
		while ( class_menu.options.length ){
			class_menu.remove(class_menu.options[0]);
		}
		
		// itterate through the global array class that contain our vehicle classes
		for ( var i = 0; i < vclasses.length; i++ ){
		
			// create an option element
			var newOpt=document.createElement('option');
			
			// make the option text equal the class
			newOpt.text=vclasses[i];
			
			// try to add the option element to the select element
			try{
			
				class_menu.add(newOpt,null); // standards compliant
			
			}catch(ex){
			
				class_menu.add(newOpt); // IE only
			
			}
			
			// now that we have our new option element we can give it a value, the same as the text in this case
			class_menu.options[i].value = vclasses[i];
						
		}
		
		// make the first option in the new drop-down list the selected one
		class_menu.selectedIndex = 0;
		
	}
	
	// this will rebuild the model menu, it needs to be built on page load, and rebuild whenever MAKE or CLASS has changed
	if (menu == 'CLASS' || menu == 'MAKE' || menu == 'ALL'){
		
		// get the select object for the model menu		
		var model_menu = document.getElementById('model_menu');
		
		// strip the select element of any options it may currently have
		while ( model_menu.options.length ){
			model_menu.remove(model_menu.options[0]);
		}
		
		// the structure for our models array is:  models['<MAKE>_<CLASS>'] = '<model>^<model>^<model>'
		// so we need to know what the current selected make and class is
		// so we can access the appropriate models array to get our list of models
		
		// get the select element for our makes menu
		var current_make = document.getElementById('make_menu');
		// get the value of the currently selected option of the menu
		current_make = current_make.options[current_make.selectedIndex].value;
		
		// get the select element for our class menu
		var current_class = document.getElementById('class_menu');
		// get the value of the currently selected option of the menu
		current_class = current_class.options[current_class.selectedIndex].value;
		
		// create our string index key for the models array we are looking for
		var index = current_make + '_' + current_class;
		
		// now that we know what models array to get we can get the '^' delimited string value and turn it into an array
		var model_list = models[index].split('^');
		
		// itterate through our local array model_list that contain our vehicle models for the currently selected make and class
		for ( var i in model_list ){
		
			// create an option element
			var newOpt=document.createElement('option');
			
			// make the option text equal the model of the vehicle
			newOpt.text=model_list[i];
			
			// try to add the option element to the select element
			try{
			
				model_menu.add(newOpt,null); // standards compliant
			
			}catch(ex){
			
				model_menu.add(newOpt); // IE only
			
			}
			
			// now that we have our new option element we can give it a value, the same as the text in this case
			model_menu.options[i].value = model_list[i];
						
		}
		
		// make the first option in the new drop-down list the selected one
		model_menu.selectedIndex = 0;
		
	}
	
	return;
}
// ############################################################################################# //


-->
</script>

</head>

<body onLoad="javascript:menu_change('ALL')">

<div>

	<select id="make_menu" onChange="menu_change('MAKE')">
		<option></option>
	</select>
	
	<select id="class_menu" onChange="menu_change('CLASS')">
		<option></option>
	</select>
	
	<select id="model_menu">
		<option></option>
	</select>

</div>

</body>
</html>

[marcmm]

I thank you all for taking the time to repply, but as I said I am very new to the whole web programming thing. I just whent over basic PHP and html. I haven't done any javascript, or dabbled with the use of other plug-ins like this ajax everybody seems to mentione. That's why I asked if it was possible to achieve this dynamism using just php alone.

I guess it's not possible to do that in php. SO I guess I have to branch out in to javascript too. I would like to experiment with the example you provided, but embarassed as it makes me, I don't even know how to make it run.

Thous far I have been using a softwere called wampserver that incloudes bolth apache and mysql. ANd with php/html it was relativelly easy as I ran everything through localhost/filename.extension ( be it php or html ). BUt I honestly have no clue how to run files that contain javascripts. I know there's jscript files with the js extension... but that dosen't work because if I save the file like that the browser will just display the code. ( by the way i'm using notepad to write my code ).

So if you could point me in the right direction I would apreciate it...

Linking objects dynamicly seemed like such a simple thing at first, and it's turning in to a real nightmere the more you learn about it.

[HazardTW]

JavaScript is run in the browser, it can be written into the HTML document between script tags, or an external js file can be linked to the page so it loads into the browser when the page loads.

One thing to remember is that the parts of your js that are not inside functions will run linear to the page, take the following example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
<!--

var mydiv_1 = document.getElementById('div_1');

function get_div(){

	var mydiv_2 = document.getElementById('div_2');

}


-->
</script>
</head>

<body onLoad="javascript:get_div()">


<div id="div_1"></div>

<div id="div_2"></div>


</body>
</html>

This line: var mydiv_1 = document.getElementById('div_1');
is not in a function, it is run in sequence with the document and would fail to get the element with id='div_1' because that element doesn't exists in the browser yet, it is further down the document.

The function get_div() however is not executed until after the page is loaded via an onload event in the <body> tag, so when it executes the element 'div_2' does exist.

Also remember that your js functions need to be triggered by some event to execute, be it onload, onunload, onclick, onmouseover, etc...

W3Schools is a good place to get the fundamentals of javascript.

I don't know if this will help or only confuse, but I rewrote the dynamic liked menus to be more automatic, the number of menus is limited only to how many you build data for.
The functions do not care how many menus there are.
Just copy this and paste it as an html document and open it in your browser:
(I put in a lot of comments, but as I said above it might just be more confusing)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">
<!--

// ############################################################################################# //


// The number of menus you can have is dynamic, just list the menu names in order in the menu_names array
// then create the items array, making sure you build items for every menu in menu_names array.
// make the first items array key equal the first menu name, in this example it is "Make"
// your first menu contents should be formatted like this:
// items['<first menu name>'] = '<main menu item 1>^<main menu item 2>^<main menu item 3>';
//
// all menu items for the second menu are formatted like this:
// items['<main menu item selected>'] = '<second menu item 1>^<second menu item 2>^<second menu item 3>';
// you do this for every item in main menu
//
// all menu items for the third menu are formatted like this:
// items['<main menu item selected>_<second menu item selected>'] = '<third menu item 1>^<third menu item 2>^<third menu item 3>';
// you create one of these for every combination of main menu, and second menu.
//
// using this pattern you can create as many linked menus as you need
//
// all menu items strings must be delimited by a caret ^
// ie. items['Make'] = 'Ford^Chevy^Dodge';
// Ford, Chevy, and Dodge are menu items stored as a ^ delimited string in items['Make']
//
// name of each menu in the dynamic menu system
// these must be in order 
// var menu_names = new Array('<menu 1 name>','<menu 2 name>','<menu 3 name>','<menu 4 name>', ... '<menu 9 name>');
var menu_names = new Array('Make','Class','Model','Color');

var items= new Array();

// contents of first menu
items['Make'] = 'Ford^Chevy^Dodge';

//
// the index keys must match the values entered for the menus
// example:
// var menu_names = new Array('Make','Class','Model','Color');
// items['Make'] = 'Ford^Chevy^Dodge';
// items['Ford'] = 'SUV^Pickup^Muscle^Cars';
// items['Ford_SUV'] = 'Escape^Explorer^Expedition';
//
// the "Make" in items['Make'] must match the menu name in menu_names, we use "Make" here because it is our top-level menu(menu 1)
// the "Ford" in items['Ford'] must match the "Ford" in items['Make'] = 'Ford^Chevy^Dodge';
// the "SUV" in items['Ford_SUV'] must match the "SUV" in items['Ford'] = 'SUV^Pickup^Muscle^Cars';
//
// all index keys, ie. 'Ford_SUV_Expedition', must be seperated by underscores
//

// contents of second menu based on selected value of first menu

// if Ford is selected in first menu, then second menu contains:
items['Ford'] = 'SUV^Pickup^Muscle^Cars';

// if Chevy is selected in first menu, then second menu contains:
items['Chevy'] = 'SUV^Pickup^Sport^Cars';

// if Dodge is selected in first menu, then second menu contains:
items['Dodge'] = 'SUV^Pickup^Muscle^Economy^Van';



// contents of third menu based on selection of menu 1 and menu 2

// if menu 1 is Ford

// and menu 2 is SUV, then menu 3 is:
items['Ford_SUV'] = 'Escape^Explorer^Expedition';

// and menu 2 is Cars, then menu 3 is:
items['Ford_Cars'] = 'Fusion^Taurus';

// and menu 2 is Pickup, then menu 3 is:
items['Ford_Pickup'] = 'Ranger^F-150^F-250 Super Duty';

// and menu 2 is Muscle, then menu 3 is:
items['Ford_Muscle'] = 'Mustang';



// if menu 1 is Chevy

// and menu 2 is SUV, then menu 3 is:
items['Chevy_SUV'] = 'Suburban^TrailBlazer^Tahoe';

// and menu 2 is Cars, then menu 3 is:
items['Chevy_Cars'] = 'Impala^Malibu';

// and menu 2 is Pickup, then menu 3 is:
items['Chevy_Pickup'] = 'Colorado^Silverado^Avalanche';

// and menu 2 is Sport, then menu 3 is:
items['Chevy_Sport'] = 'Corvette';



// if menu 1 is Dodge

// and menu 2 is SUV, then menu 3 is:
items['Dodge_SUV'] = 'Durango^Nitro';

// and menu 2 is Economy, then menu 3 is:
items['Dodge_Economy'] = 'Caliber';

// and menu 2 is Pickup, then menu 3 is:
items['Dodge_Pickup'] = 'Dakota^Ram';

// and menu 2 is Van, then menu 3 is:
items['Dodge_Van'] = 'Caravan';

// and menu 2 is Muscle, then menu 3 is:
items['Dodge_Muscle'] = 'Charger';



// contents of the fourth menu based on the selections in menu 1(Make), menu 2(Class), and menu 3(Model)

// if menu 1 is Ford and menu 2 is SUV:

// and menu 3 is Escape, then menu 4 is:
items['Ford_SUV_Escape'] = 'Red^White^Black';

// and menu 3 is Explorer, then menu 4 is:
items['Ford_SUV_Explorer'] = 'Blue^Yellow^Green';

// and menu 3 is Expedition, then menu 4 is:
items['Ford_SUV_Expedition'] = 'Red^White^Black';


// if menu 1 is Ford and menu 2 is Cars:

// and menu 3 is Fusion, then menu 4 is:
items['Ford_Cars_Fusion'] = 'Blue^Yellow^Green';

// and menu 3 is Taurus, then menu 4 is:
items['Ford_Cars_Taurus'] = 'Red^White^Black';


// if menu 1 is Ford and menu 2 is Pickup:

// and menu 3 is Ranger, then menu 4 is:
items['Ford_Pickup_Ranger'] = 'Blue^Yellow^Green';

// and menu 3 is F-150, then menu 4 is:
items['Ford_Pickup_F-150'] = 'Red^White^Black';

// and menu 3 is F-250 Super Duty, then menu 4 is:
items['Ford_Pickup_F-250 Super Duty'] = 'Blue^Yellow^Green';


// if menu 1 is Ford and menu 2 is Muscle:

// and menu 3 is Mustang, then menu 4 is:
items['Ford_Muscle_Mustang'] = 'Red^White^Black';


// follow the same pattern with the other "Make_Class_Model" menu possiblities
items['Chevy_SUV_Suburban'] = 'Blue^Yellow^Green';
items['Chevy_SUV_TrailBlazer'] = 'Red^White^Black';
items['Chevy_SUV_Tahoe'] = 'Blue^Yellow^Green';

items['Chevy_Cars_Impala'] = 'Red^White^Black';
items['Chevy_Cars_Malibu'] = 'Blue^Yellow^Green';

items['Chevy_Pickup_Colorado'] = 'Red^White^Black';
items['Chevy_Pickup_Silverado'] = 'Blue^Yellow^Green';
items['Chevy_Pickup_Avalanche'] = 'Red^White^Black';

items['Chevy_Sport_Corvette'] = 'Blue^Yellow^Green';

items['Dodge_SUV_Durango'] = 'Red^White^Black';
items['Dodge_SUV_Nitro'] = 'Blue^Yellow^Green';

items['Dodge_Economy_Caliber'] = 'Red^White^Black';

items['Dodge_Pickup_Dakota'] = 'Blue^Yellow^Green';
items['Dodge_Pickup_Ram'] = 'Red^White^Black';

items['Dodge_Van_Caravan'] = 'Blue^Yellow^Green';

items['Dodge_Muscle_Charger'] = 'Red^White^Black';


// recursive function to extract the index for items[] for the current menu level
// example:  menu_names = new Array(0=>'Make',1=>'Class',2=>'Model',3=>'Color');
// menu_names[2] = "Model"
// to get a list of models we need to know the "Make" and "Class" selected
// if "Make" is "Ford" and "Class" is "SUV"
// we want items["Ford_SUV"] to get a list of Ford SUV's
// since the menu we want is "Model" and it's index in the menu_names array is 2
// the value sent to this function is 2
// on the initial call it gets the value of the menu immediately above it menu_names[2-1=1] = "Class"
// which we said for our example is "SUV"
// since m is greater than 1 the function calls itself recursively with m-1 until m == 1
// with m = 2 - 1 = 1 the functions does not call itself again but instead returns the
// value of the selected index of the menu named menu_names[m=(1-1)=0] = "Make" which we said was "Ford"
// so with the recursive call returning "Ford"
// and the initial call returning <recursive call> + '_' + "SUV"
// our new index for items[] = "Ford_SUV"
// items["Ford_SUV"] = 'Escape^Explorer^Expedition'
// which will be the contents of our new "Model" menu
// menu levels "m" are:
// 0 == menu 1(this menu will not call this function)
// 1 == menu 2
// 2 == menu 3
// 3 == menu 4
// and so on...
function build_option_index(m){

	// make sure we are dealing with a number vs string
	m = Number(m);
	
	// get the menu that is directly above the currently passed menu level
	var tlm = document.getElementById(menu_names[m-1] + '_menu');

	// test to see if this menu has a selected option, and if so that it is not a negative number
	if( tlm.selectedIndex && tlm.selectedIndex >= 0 ){
		
		// if we have a selected menu option, record it's index
		var selected_index = tlm.selectedIndex;
		
	}else{
		
		// if we do not have a valid selected option for this menu, we use index 0
		// which will be the first option available for the menu we are looking at
		var selected_index = 0;
		
	}
	
	// get the value of the selected menu option
	var current_value = tlm.options[selected_index].value;
	
	if( m <= 1 ){
		alert('last recursive call returning: ' + current_value);
		// really this is m==1 but I use m<=1 just to make sure we don't get any errors
		// with m == 1 this means we are at menu 2 and the value we are returning is the
		// value of the selected option for menu 1 ( document.getElementById(menu_names[m-1] + '_menu'); ), our top-level menu
		// last itteration, will return the value of the selected top-level menu item
		return current_value;
		
	}else{
		alert('making recursive call: <recursive call> + "_" + ' + current_value);
		// if we are not at menu 2 ( m==1 ) yet, then we append the current menu - 1 selected value
		// to the returned value of a recursive call to this function using the next menu up ( m-1 )
		// using the underscore to seperate the values
		return build_option_index(m-1) + '_' + current_value;
	
	}

}

// function to add the select elements to the document
// only requires an element with id="dynamic_menu_wrapper" be present in the document
// to append the new select elements to
function build_menus(){

	// get the document element that will hold our menus
	var wrapper = document.getElementById('dynamic_menu_wrapper');
	
	// itterate through all menu names in menu_names array
	for( var m in menu_names ){
	
		// format of the select elements we are creating:
		// <select id="<current menu name>_menu" onChange="menu_change(this.id)">
		
		// create the select element
		var sel = document.createElement('select');
		
		// create a text node to go before the select element to print the current menu name
		var t = document.createTextNode(menu_names[m] + ': ');
		
		// set the id property of the select element
		sel.id = menu_names[m] + '_menu';
		
		// set the onChange function of the select element
		// needed to trigger the functions to rebuild necessary lower-level menus
		sel.onchange = function(){menu_change(this.id);};
		
		// add the text element to the document element that will hold our menus
		wrapper.appendChild(t);
		// add the select element now
		wrapper.appendChild(sel);
	
	}
	
	// all menus have been created and added to the document
	// call menu_change with argument 'ALL' to build the options for all menus
	menu_change('ALL');

}

// function called when any menu value is changed so we can build new lower-level menus
// than the menu being changed
function menu_change(menu){

	// strip '_menu' from the element ID to get current menu name
	menu = menu.replace('_menu','');

	// initialize menu_index to be greater than existing indices	
	var menu_index = menu_names.length;
	
	// itterate through all menus
	for( m in menu_names ){
	
		// check menu against current index, if match then set menu_index
		// used to determine if the changing menu is a higher menu than the 
		// current index, meaning it needs to be re-built
		if( menu == menu_names[m] ) menu_index = m;
		
		// only build menu if current index 'm' is higher than menu_index
		// so we only rebuild menus that are lower than the changed menu
		if( m > menu_index || menu == 'ALL' ){
		
			alert('rebuilding menu: ' + menu_names[m]);
			
			// if m==0 then we are currently itterating over the top-level menu (menu 1)
			// so we don't call the recursive function to get our items[] index
			// option_list_index will be used to get items['<option_list_index>']
			if( m == 0 ){
			
				// current itteration is menu 1 so we set the option_list_index to
				// menu_names[0] which is the first menu in menu_names array
				// and items['<menu 1 name>'] == the only set of values for menu 1
				// ie. items['Make'] = 'Ford^Chevy^Dodge';
				var option_list_index = menu_names[0];
			
			}else{
			
				// if we are past menu 1, the top-level menu then we need to 
				// use the build_option_index() function to return the index key
				// we need for the current menu level
				// ie. option_list_index could be "Ford_SUV_Expedition"
				// which would mean we were building options for the fourth level menu
				// who's value in our example are:
				// items['Ford_SUV_Expedition'] = 'Red^White^Black';
				var option_list_index = build_option_index(m);
				alert('back from recursive function with index: ' + option_list_index);
				
			}
			
			// example: items['Ford_SUV_Expedition'] = 'Red^White^Black';
			// split the resulting string at ^ and get an array of 'Red','White','Black'
			// for our menu options
			var current_items = items[option_list_index].split('^');
			
			// get the current menu select element
			var current_menu = document.getElementById(menu_names[m]+'_menu');
			
			// strip the select element of any options it may currently have
			while ( current_menu.options.length ){
			
				current_menu.remove(current_menu.options[0]);
				
			}
			
			// itterate through the current_items array
			for ( var i = 0; i < current_items.length; i++ ){
			
				// create an option element
				var newOpt=document.createElement('option');
				
				// make the option text equal the current item
				newOpt.text=current_items[i];
				
				// try to add the option element to the select element
				try{
				
					current_menu.add(newOpt,null); // standards compliant
				
				}catch(ex){
				
					current_menu.add(newOpt); // IE only
				
				}
				
				// now that we have our new option element we can give it a value, the same as the text in this case
				current_menu.options[i].value = current_items[i];
							
			}
			
			// make the first option in the new drop-down list the selected one
			current_menu.selectedIndex = 0;
		
		}
		
	
	}

	return;

}
// ############################################################################################# //


-->
</script>

</head>

<body onLoad="javascript: build_menus()">

<div id="dynamic_menu_wrapper">


</div>

</body>
</html>

For some reason there are <b></b> tags being inserted into the code at:
<body onLoad="javascript: build_menus()">
Between javascript and the colon, they should not be there.

[marcmm]

Ok, well I understood how your example works... basicly, I'm still having problem with the syntax, and recursivity is an anoyance ( didn't really like it back when I was doing C++, don't like it now either, but hey, if it gets the job done... ).

Now, I would have one more question reguarding this example, it works out perfectly and it's just what I'm looking for, so I'm going to try and apply this to my problem, but there's a catch, I have noticed that you actually whent and hard-coded all the possible combos. Now it's preatty simple with so few options, but I would imagine that the amount of code would increase to staggering proportions for more options, not to mentione that each time the database is changed ( adding new fields, removing or modifying existing fields ) would mean that one would have to go in the page code too and modify the code acording to the database changes.

Just upkeeping the table of possible combos would be a titanic job. There must be a way in wich to automate that process, so that the combos would be generated automatically reguardless of what data you are importing from the database.

SO far, as I posted in my original topic, I'm gettign the data out of the database through queries, wich I am storing in arrays, and then asigning the values of the arrays directly in to the menues ( I'm guessing that this code would work just as well from a .php file as it dose from an .html file, no? ), now obviously if the menues are to be linked, this process won't work. At this point I can only imagine asigning the data of each dropdown list to a separate string, then somehow use a system of FORs combined with a strlength to create these combos automatically. But I doubt that would work since something like that would still require the table of combos you described in the example above just to remember wich suboptions belong to wich options and so on...

I'm stumped as to how to work around this...

ANy ideas?

[HazardTW]

The idea behind my last example is that when the page is loaded by the client, the PHP would build ALL the js variables from your database queries by echoing them into the js part of the document.
The method to extract your data from the database will be completely dependent on your database structure.

Can you give me an example of how your database is structured, ie. tables, columns in those tables, which data becomes a menu, which data becomes selections of those menu's, etc.
You can use dummy names and values, just the structure is important,and how it relates to the menus.
Maybe I can build a php script for you.

[marcmm]

well, the database is preatty extensive ( I did not build the database ), but I will try to give a description of those tables in the DB that are conected with this particular process.

The main table seems to be one called "product" wich has the following columns:

ID ( primary key )
productname
id_firm ( key )
id_cathegory ( key )
id_subcathegory ( key )
productdescription
oldprice
newprice
circulatingmedium
logo
date
display ( a variable used in the original queries as a condition )

Then there's the "firm" table:

ID ( primary key - linked with id_firm in product table )
firmname ( displayed in the firm dropdown list )
logo

Then there's the "cahtegory" table:

ID ( primary key - linked with id_cathegory in product table )
cathegoryname ( what is displayed in the cathegory dropdown list )

Then there's the "subcathegory" table:

ID ( primary key - linked to id_subcathegory in the product table )
cathegory ( key - linked with ID in cathegory table )
subcathegory name ( what is displayed in the subcathegory dropdown list )

There are obviously more tables invoulved in the DB, but these seem to be the only ones that this particular feature uses, or should use.

Let me know if you need further explanations. My original post in the topic shows how the queries were built to extract the data from the DB and place it in the three dropdown lists...

I sure don't like having other people do what I'm supposed to do, but this thing really has me in a bind and I wouldn't know what more to do on my own...

[marcmm]

P.S.

for the integrity of the remaining code, the first option in each of the three dropdown lists must be "Oricare" ( everything ), wich is later used in determining weather the user sleected something from the dropdown lists or just left the default values wich are coded to display the entire list of products.

[HazardTW]

There is a little bit of a language barrier, I am not completely clear on the menus.
Are there four menus with three being dynamic, or three total.

So far I gather that you may have:
- Firm menu (static) containing firm names from firm table
- Category menu (dynamic based on Firm selection) containing categoryname from category table
- Sub-Category menu (dynamic based on Firm->Category selection) containing subcategory name from subcategory table

This is the one I am not sure about:
- Product menu (dynamic based on Firm->Category->Sub-Category selection) containing products from products table?????

Or does a combination of the first three result in a product page?

In your original post I see only two queries:
1 - query to get firm names, possibly only firm names that have products in the product table
2 - query to get categories similarly linked to product like the firm's query, but I do not see that the categories query is based on the selected firm.

Is this a misunderstanding on my part or is category the same for all firms?

[marcmm]

Yes indeed, there are only 3 menues. Threre is NO "product" menue.

The site sems to use superglobals ( via $_REQUEST) to link to the dropdownlist objects ( from the page that displays the results ) and store what ever is selected in variables wich are later on used in conditionals to determine weather the user has modifyed the standard option ( namelly to display all ). then based on that, the results are displayed in a table on a different frame then the dropdown lists.

SO in the end yes, there are ONLY 3 MENUES:

Firm ( static, not influenced by anything )
Cathegory ( influenced by firm )
Subcathegory ( influenced by firm and cathegory )

and the chalange is the make those three menues dynamicly linked. If it's possible to do it only via javascript it would be nice, since it wouldn't require the instalation of aditional softwere on the server the site will be running from...

[HazardTW]

Ok, I am close to a solution but must go to work.

I will finish when I get home tonight.

I will not be able to write the exact query strings because I am not 100% comfortable that I understand the way your tables are linked as is pertains to the queries, but I will write all the necessary code, and where your query should go, I will explain exactly what the query should achieve, then you should be able to write the actual query string.

I did end up with one more question about the menus regarding the 'Oricare' option.
How does 'Oricare' affect category and sub-category menu population?

[marcmm]

I would apreciate it greattly.

ANd the oricare option mearly dumps ALL the options in the menue.

SO if the first menue has "any ( oricare )" selected, the second menue will display all the cathegories from all the firms. In adition if the second menue ( cahtegory ) has "any" selected, the last menue ( subcathegory ) will have all subcathegories selected from all the cathegories from all the firms.

If you select a firm in the first menue and any in the second menue, the second menue will be populated with all the cathegories from the single selected firm. Likewise if you select a cathegory from the second menue the third menue should be populated only with the subcathegories of the single selected cahtegory.

The any option should remain present no matter what selection you make, in every menue.

The any option however is a key in the display process, because it determines what gets printed when the search button is clicked under the dropdown lists.

The code contains 9 if statements to cover ANY possible combination between the three dropdown lists ( to check weather "any" is selected ):

// this code is situated on another php file inclouded in the file in wich the dropdown lists are created. It seems to refear to the drobdown list objects as superglobals with the $_request function ( though I am not entierly sure, as changing either the name or the ID of the actual objects will have no efect on the page display. )

( combo_firma,combo_categorie & combo_subcategorie are the name and ID of the dropdown objects given when they were created. )

$combo_firma=$_REQUEST['combo_firma'];
$combo_categorie=$_REQUEST['combo_categorie'];
$combo_subcategorie=$_REQUEST['combo_subcategorie'];

// the "any" option was manually inserted on position 0 of all the dropdownlists.

IF (($combo_firma<>0) AND ($combo_categorie<>0) AND ($combo_subcategorie<>0))
{
	$sql_lista="SELECT produse.ID, produse.logo, categorie.dencategorie, subcategorie.densubcategorie, firme.denfirma, produse.denumire, produse.pretnou, produse.valuta, subcategorie.id as subcatid 
		    FROM produse, categorie, subcategorie, firme 
		    WHERE ( ( produse.id_categorie = categorie.ID ) 
		    AND ( produse.id_subcategorie = subcategorie.ID ) 
		    AND ( produse.id_firma = firme.ID ) 
		    AND (produse.afisare='-1') 
		    AND (produse.id_firma=$combo_firma) 
		    AND (produse.id_categorie=$combo_categorie) 
		    AND (produse.id_subcategorie=$combo_subcategorie)) 
		    ORDER  BY categorie.dencategorie ASC , subcategorie.densubcategorie ASC, firme.denfirma asc, produse.pretnou ASC";
}

IF (($combo_firma<>0) AND ($combo_categorie<>0) AND ($combo_subcategorie==0))
{
	$sql_lista="SELECT produse.ID, produse.logo, categorie.dencategorie, subcategorie.densubcategorie, firme.denfirma, produse.denumire, produse.pretnou, produse.valuta, subcategorie.id as subcatid 
		    FROM produse, categorie, subcategorie, firme 
		    WHERE ( ( produse.id_categorie = categorie.ID ) 
		    AND ( produse.id_subcategorie = subcategorie.ID ) 
		    AND ( produse.id_firma = firme.ID ) 
		    AND (produse.afisare='-1') 
		    AND (produse.id_firma=$combo_firma) 
		    AND (produse.id_categorie=$combo_categorie)) 
		    ORDER  BY categorie.dencategorie ASC , subcategorie.densubcategorie ASC , firme.denfirma ASC, produse.pretnou ASC";
}

IF (($combo_firma<>0) AND ($combo_categorie==0) AND ($combo_subcategorie<>0))
{
	$sql_lista="SELECT produse.ID, produse.logo, categorie.dencategorie, subcategorie.densubcategorie, firme.denfirma, produse.denumire, produse.pretnou, produse.valuta, subcategorie.id as subcatid 
		    FROM produse, categorie, subcategorie, firme 
		    WHERE ( ( produse.id_categorie = categorie.ID ) 
		    AND ( produse.id_subcategorie = subcategorie.ID ) 
		    AND ( produse.id_firma = firme.ID ) 
		    AND (produse.afisare='-1') 
		    AND (produse.id_firma=$combo_firma) 
		    AND (produse.id_subcategorie=$combo_subcategorie)) 
		    ORDER  BY categorie.dencategorie ASC , subcategorie.densubcategorie ASC , firme.denfirma ASC, produse.pretnou ASC";
}

IF (($combo_firma==0) AND ($combo_categorie<>0) AND ($combo_subcategorie<>0))
{
	$sql_lista="SELECT produse.ID, produse.logo, categorie.dencategorie, subcategorie.densubcategorie, firme.denfirma, produse.denumire, produse.pretnou, produse.valuta, subcategorie.id as subcatid 
		    FROM produse, categorie, subcategorie, firme 
		    WHERE ( ( produse.id_categorie = categorie.ID ) 
		    AND ( produse.id_subcategorie = subcategorie.ID ) 
		    AND ( produse.id_firma = firme.ID ) 
		    AND (produse.afisare='-1') 
		    AND (produse.id_categorie=$combo_categorie) 
		    AND (produse.id_subcategorie=$combo_subcategorie)) 
		    ORDER  BY categorie.dencategorie ASC , subcategorie.densubcategorie ASC , firme.denfirma ASC, produse.pretnou ASC";
}

IF (($combo_firma<>0) AND ($combo_categorie==0) AND ($combo_subcategorie==0))
{
	$sql_lista="SELECT produse.ID, produse.logo, categorie.dencategorie, subcategorie.densubcategorie, firme.denfirma, produse.denumire, produse.pretnou, produse.valuta, subcategorie.id as subcatid 
		    FROM produse, categorie, subcategorie, firme 
		    WHERE ( ( produse.id_categorie = categorie.ID ) 
		    AND ( produse.id_subcategorie = subcategorie.ID ) 
		    AND ( produse.id_firma = firme.ID ) 
		    AND (produse.afisare='-1') 
		    AND (produse.id_firma=$combo_firma)) 
		    ORDER  BY categorie.dencategorie ASC , subcategorie.densubcategorie ASC , firme.denfirma ASC, produse.pretnou ASC";
}

IF (($combo_firma==0) AND ($combo_categorie<>0) AND ($combo_subcategorie==0))
{
	$sql_lista="SELECT produse.ID, produse.logo, categorie.dencategorie, subcategorie.densubcategorie, firme.denfirma, produse.denumire, produse.pretnou, produse.valuta, subcategorie.id as subcatid 
		    FROM produse, categorie, subcategorie, firme 
		    WHERE ( ( produse.id_categorie = categorie.ID ) 
		    AND ( produse.id_subcategorie = subcategorie.ID ) 
		    AND ( produse.id_firma = firme.ID ) 
		    AND (produse.afisare='-1') 
		    AND (produse.id_categorie=$combo_categorie)) 
		    ORDER  BY categorie.dencategorie ASC , subcategorie.densubcategorie ASC ,  firme.denfirma asc,produse.pretnou ASC";
}

IF (($combo_firma==0) AND ($combo_categorie==0) AND ($combo_subcategorie<>0))
{
	$sql_lista="SELECT produse.ID, produse.logo, categorie.dencategorie, subcategorie.densubcategorie, firme.denfirma, produse.denumire, produse.pretnou, produse.valuta, subcategorie.id as subcatid 
		    FROM produse, categorie, subcategorie, firme 
		    WHERE ( ( produse.id_categorie = categorie.ID ) 
		    AND ( produse.id_subcategorie = subcategorie.ID ) 
		    AND ( produse.id_firma = firme.ID ) 
		    AND (produse.afisare='-1') 
		    AND (produse.id_subcategorie=$combo_subcategorie)) 
		    ORDER  BY categorie.dencategorie ASC , subcategorie.densubcategorie ASC ,  firme.denfirma asc,produse.pretnou ASC";
}

IF (($combo_firma==0) AND ($combo_categorie==0) AND ($combo_subcategorie==0))
{
	$sql_lista="SELECT produse.ID, produse.logo, categorie.dencategorie, subcategorie.densubcategorie, firme.denfirma, produse.denumire, produse.pretnou, produse.valuta, subcategorie.id as subcatid 
		    FROM produse, categorie, subcategorie, firme 
		    WHERE ( ( produse.id_categorie = categorie.ID ) 
		    AND ( produse.id_subcategorie = subcategorie.ID ) 
		    AND ( produse.id_firma = firme.ID ) 
		    AND (produse.afisare='-1')) 
		    ORDER  BY categorie.dencategorie ASC , subcategorie.densubcategorie ASC , firme.denfirma asc, produse.pretnou ASC";
}

if all three dropdown lists have "any" selected and the search button is clicked the page willl display all cathegory of products and all subcathegory of products from every firm present in the DB...

[HazardTW]

Ok, got something worked out but it doesn't quite display correctly when I insert the code into the post.

If you PM me with an email address I will zip the example files up and send them to you.

[HazardTW]

You still around?

[marcmm]

yes, still around... I was just away over the weekend...

[e-mail]

[HazardTW]

Mail sent.

Not sure if it would matter or not, but I requested a PM (private message) with your email in order to keep your email addy out of the public forums where bots can get to it, you may want to edit your post and remove your email addy.

Would hate to see you get bombarded with spam because it is in the public forum ;)

Oh, and if my solution works for you, remember to come back here and mark this thread as solved =)

[Manuz]

Use Ajax 4 best perfomance

[HazardTW]

The solution I sent him does :)

[marcmm]

guys, sorry for beying so silent over the past weeks, been flooded with other things that I didn't have time to look over that suggestion properly, but I will be looking voer ti soon and will provide feedback about weather I could or couldn't fix the problem

Please bear with me.

[marcmm]

Ok guys... I took the time to look over the posted solution... but I'm affraid I was not able to understand half of what was going on in there.

I fiddled around and came up with this simplistic example:

<html>
<head>
	<title>Exemplu select</title>
<script language="javascript">

function onchangeCounty()
{
	document.form1.submit();
}
</script>
</head>
<body>

<?php
	$County1 = $_GET[County];
?>

<form name="form1" METHOD=get >

	County:
	<select name="County" onchange="onchangeCounty();">
		<option value=""></option>
		<option value="name1">Name1</option>
		<option value="Name2">Name2</option>
	</select>

	<?php

	$con = mysql_connect("localhost","root","");
	if (!$con)
	{
	    die('Could not connect: ' . mysql_error());
	}
	mysql_select_db("DBname", $con);
	$select="SELECT * FROM tablename WHERE Countyname='$County1'";
	echo "<br>";
	$result = mysql_query($select);
	echo "County:";
	echo "<select>";
	while($row = mysql_fetch_array($result))
	{
		echo "<option>" . $row['Countyname'] . "</option>";
	}
	echo "</select";
	mysql_close($con);
	?>
</form>
</body>
</html>

Now this works preatty well as it is... but it needs enhancing.

First of all, the option selected in the first list dosen't stay selected when the form reloads. I am transmitting the value and it's there when the form reloads via the get methode... but I haven't the slightest clue how to force the select object to target it after it has been repopulated. Any ideas?

Secondly. this example has the form only containing the dropdown lists. but I intend to use it in a form that will contain checkboxes too. well I don't want to loose the selected checkboxes when the form reloads... so is there a way in wich to put one form inside another?

Like:

<form1>
<form2>
code for dropdown lists and dropdown lists set with the onchange reload option
</form2>
code for checkboxes and submit button
</form1>

Or do I have to go and get all the values of any selected checkbox and send it through the link back to the beginning of the form and then re-select them?

and if so, the same question from the dropdown lists applies here... how do you force these objects to have a particular option set based on what data is beying transmited?

I would apreciate any feedback on this.

( Oh yes, and as a sidenote, it was pointed to me that the "joomla" is a stable and efficient designing enviroment for web based aplications. would it be advisable to use such an enviroment over notepad coding and development? )

[marcmm]

the database is called DBname. it contains just one table called tablename.

the table contains just two columns. a county column and a cityname column.

I would really apreciate some feedback on this guys. Please...