Dynamic php/js select options

briansol

Hey folks... I'm stupmed.

I am working on a part of my shopping cart for the item administration
part. In it, I want the admin to choose where to place this item.

First, he will select the category:

<?
echo "<select id=\"item_category\" name=\"item_category\" class=\"input\"
size=\"1\" >";
$sql = "SELECT category_name, category_id from categories ORDER BY
category_name ASC";
if($r = mysql_query($sql, $db))
{
while($m = mysql_fetch_array($r))
{
$j = stripslashes($m[category_name]);
echo "<option value=\"$m[category_id]\">$j</option>";
}
}
echo "</select>";
?>

No problem.

Now, from this selected category, I need to do a dynamic select from the
departments table where department_category_id == $m[category_id]
(department_category_id is my foreign key)
again, not really an issue.... BUT

The issue is that I want this to happen without a request to the server.
Hello javascript 🙂

How can I have it so that onChange() of the select form element in
the category field pull the proper departments for said selected category
without doing a request to the server again?

Basically, I want it to function like Yahoo auto's does.
http://autos.yahoo.com/ (under new cars heading)
I've taken a look at their code, but its all strictly JS and hardcoded
arrarys. I can't have that, as I don't want to change my code every time a
new category or department is added.
I'm pretty stumped on this one.

My first idea was to select everything from the departments table on page
load, that way, a request doesn't have to be made back to the server. But,
I found this to be impossible to work with... I either got all or nothing.

If anyone has ever created a dual-stage dynamic menu before, please please
please help me out!!!

Thanks in advance,

-Brian

Rodders

The arrays might look hardcoded on Yahoo but the Javascript is probably built using server-side coding.

Let's say it's PHP: first it will query the database for manufacturers and models. Then it will output the Javascript to build the arrays. The it will serve up the page to the user.

Then there is the clever javascript which changes the options for model everytime you change the manufacturer.

If a new manufacturer is added or a new model added, then the PHP scripting would automatically build this into the javascript arrays.

So, you don't need to hardcode the javascript, you just need to use server-side script which builds the arrays everytime.

VoiD

Just make an array with all the data for one type, then use javascript to load it in. In other words, just use what Rodders suggested 🙂

Using php in javascript is not that hard, actually it's very simple. Even building completely new functions is a breeze.

If you try to use ALL PHP, and no javascript, you would have to refresh the site... I did this on a site, since it was in my very early php days, but now I would probably build it using javascript functions that are built from the php results.

briansol

I plan to use js in it. The problem being, is that I don't want to submit the form data after the first option is made to generate the second list.

I have 0 knowledge of javascript, and i think that is what's holding me back on this one. I can read it, but I sure as hell can't code in it.

So, basically you guys are saying to query for both the categories and the departments, then depending on what is selected, have js print out the proper options for the selections? Am I following you guys here?

Thanks for the replies-- keep 'em coming 🙂

VoiD

What i would do is this (using cars as example):

1) Make the php site, and a select box that queries for all the car brands, make a SELECT CAR... button with NO value, give it a javascript onchange. OnChange=javascript:changemodels() for instance.

2) Make a select box underneath that with ZERO entries, or perhaps one with no value (NO CAR SELECTED for instance).

3) In javascript, make the function changemodels(), and within this javascript, build functions for ALL the car brands and appropriate models (using a php loop for the carbrands data).
Then you would have to read out the value of the car brand you selected, and with this value, you can call the entire model thingy.

if (document.forms.carbrand.value=porsche) { loadporsche(); }

etc etc.

Within loadporsche you would have to run another loop for entering all the different type of cars, so you will dynamically fill the empty select box.

Don't know the exact javascript, since I'm not very good at it either, but making it this way would work.

But it can probably be done easier I guess 🙂

briansol

the way I see this, it only solves half of my problem... and the easier half in my opinion...

if (document.forms.carbrand.value=porsche) { loadporsche(); }

With this, I have to know that I have a porsche... and that there's a 911 Turbo in there in the function. Otherwise, the function is useless and will select only pre-made "loadXXXcarXXX() functions"

I'm building a shopping cart with this script- Who ever downloads it and uses it (someone I hope 🙂 ) will certainly have different categories of products-

In other words, I'm trying to build this:

An admin creates a category called movies. He also creates several departments: westerns, action/adventure, comedy, and so on.

Now, when that admin goes to add an item, in our case, Forest Gump DVD, I want the categories to all be displayed, and when "movies" is selected, the next select box generates option values for western, drama and so on.

They key part to all this, is that I need the values of the options so that I can insert them into the DB along with the item. Having null values doesn't nothing for the functionality of DB inserts.

Again, maybe I'm seeing this all wrong. I do appreciate your help on this so far. I "know" what I want to do and have the algorithm all drawn out, I just can't code it to work for me.

Rodders

The problem is, without actually writing the whole code it is very difficult to explain.

You basically need the following:

A table for categories with ID and description. The ID will be used for the VALUE attribute in your <OPTION> tags within the category <SELECT>. The description will be what the user/admin can see in the drop-down list.
A table for departments with categoryID, deptID and description. The categoryID links it to the category table, deptID will be the VALUE attribute in your <OPTION> tage within the department <SELECT>. The description will be what the user/admin can see in the drop-down list.
PHP script to read the cateogry table. This will need to retrieve ALL rows. Then it will build the Javascript which will create the <OPTION> tags for your category <SELECT>. It will also need to create an array of all the category IDs which will be used to determine which array to use for the department <SELECT>.
For each category it will need to find all the departments. The script will build the Javascript so that each category has two arrays: one for deptIDs and one for deptdescription. Write the Javascript to do this. I suggest the arrays are called category[catID]ID and category[catID]_desc. That way when you get the value of catID from the category <SELECT>, all you need to do is substitute it into my [catID].
Then you need a javascript function to clear the department <SELECT> and then repopulate it with the relevant departments from the arrays. In the category <SELECT> tags, you need to have an onChange="function()":

Some snippets:

NEW SELECT OPTION -

newoption = new Option;
newoption.text = dept_description;
newoption.value = deptID;
document.yourform.deptselect.option = newoption;

where 'i' is the array index that you loop through.

I suggest you try getting the HTML and Javascript working with some hardcoded values first. Then you can replace the hardcoding with PHP to dynamically produce your arrays.

briansol

I think I need to take this over to a javascript board... 😃

1,2, and 3 are all done

4 is where i'm stuck...

For each category it will need to find all the departments.

How do a get the dept's? when the form is change, the value in the category field is changed-- but can I pass that to php without going back to the server? I don't think its possible. That said, javascript can pass it- but then I can't pull it.

??confused??

Rodders

You're right, you can't go back to PHP without going back to the server.

Your PHP script just creates the javascript + HTML dynamically. So it is the PHP which gets all the categories and all the departments for each. But within that code, you build the javascript as you go either directly using 'echo' or by putting it into one big variable and then echoing that out at the end.

Essentially, you'll need two PHP loops. The first loop is on category. Each pass of the loop is for a category from the category table. Within that loop is where you will build the category <SELECT> tag and it's <OPTION> tags. Then within that loop you need a 2nd loop which goes through all the departments for the current category. Within the 2nd loop all you will do is create javascript with arrays for each category containing deptID and description.

When the main loop is finished you will have to build your HTML and javascript using the dynamically created code. So within the <SCRIPT> tags in the <HEAD> you will have a list of array definitions and a function which processes the department <SELECT> dependant upon the value in category <SELECT>

The javascript is complicated for this, so I suggest going over to http://forums.webdeveloper.com and asking in the Javascript forum for some advice.

briansol

ok, before i make my way over there... I found this in one of my books....

its a simple 1-to-1 script.

<HEAD>
<TITLE>Parallel Array Lookup</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// the data
var regionalOffices = new Array("New York", "Chicago", "Houston", "Portland") 
var regionalManagers = new Array("Shirley Smith", "Todd Gaston", 
"Leslie Jones", "Harold Zoot") 
var regOfficeQuotas = new Array(300000, 250000, 350000, 225000) 
// do the lookup into parallel arrays
function getData(form) { 
   var i = form.offices.selectedIndex 
   form.manager.value = regionalManagers[i] 
   form.quota.value = regOfficeQuotas[i] 
} 
</SCRIPT>
</HEAD>

<BODY onLoad="getData(document.officeData)">
<H1>Parallel Array Lookup</H1>
<HR>
<FORM NAME="officeData"> 
<P> 
Select a regional office: 
<SELECT NAME="offices" onChange="getData(this.form)"> 
   <OPTION>New York 
   <OPTION>Chicago 
   <OPTION>Houston 
   <OPTION>Portland 
</SELECT> 
</P><P> 
The manager is: 
<INPUT TYPE="text" NAME="manager" SIZE=35> 
<BR> 
The office quota is: 
<INPUT TYPE="text" NAME="quota" SIZE=8> 
</P> 
</FORM>

Now, Can I take this a step further, and make it 1 to many. right now, if you select new york fromt he drop down, it changes the manager to shirley smith, and the quota to 30000.

Would multidemisional array work in this case?

Rodders

Yes, but with a lot of tweaks. Firstly you don't want the value of your 2nd box to change, you want the whole list to change. So the function 'getData' needs to find the department array relating to the chosen category then set the options.

You'll need to ask a Javascript expert how best to setup the arrays. Or they may suggest using objects.

briansol

thanks for all the help

i'll keep ya posted on how it progresses into the day

Rodders

Yeh, do keep me posted. I was looking at a similar scenario to this recently but I have found in my case that I have an easier solution.

However, I think it is something that I will need in future.

I'm going to try and work this out as well, but not 'til the weekend cos I have a lot on this week! An important TEST tomorrrow !!!!

essexboy

... then this may be what u need....

http://www.zend.com/zend/tut/drop-down.php

they update, via JS, without a call to the server (i think, i did it a long time ago) a drop down list in a form via what was preciously selected in a prior drop down box.

hope this helps, send me a beer at XMAS if it helps.

oli

THIS IS WHAT I DID

function chainedSelectors($id, $action) {
?>
<form name="categorySelect" action="?" method="get">
<input type="hidden" name="action" value="<?php echo"$action"; ?>">
<input type="hidden" name="id" value="<?php echo"$id"; ?>">
<?php

$result = mysql_query("SELECT directoryMainCategories.mainName, directoryMainCategories.mainID, directorySubCategories.subID, directorySubCategories.subName, directorySubCategories.subXref FROM directorySubCategories, directoryMainCategories WHERE directorySubCategories.subXref = directoryMainCategories.mainID");

echo "Main Category <SELECT NAME=\"\" ONCHANGE=\"maincategoryselected(this);\">\n";
echo "<option selected>Please Select Main Category</option>\n";

$sJavaScript = "function maincategoryselected(elem){\n for (var i = document.categorySelect.subcategory.options.length; i >= 0; i--){ \n document.categorySelect.subcategory.options = null;\n";

$sLastCountry="";
while ( $row = mysql_fetch_array($result) )
{

If ($sLastCountry!=$row["mainName"])
{
$sLastCountry = $row["mainName"];
echo "\n<OPTION VALUE='".$row["mainID"]."'>".$sLastCountry."</OPTION>";

	$sJavaScript = $sJavaScript."}\n"."if (elem.options[elem.selectedIndex].value==".$row["mainID"]."){\n";
 }
$sJavaScript = $sJavaScript."document.categorySelect.subcategory.options[document.categorySelect.subcategory.options.length] = new Option('".$row["subName"]."','".$row["subID"]."');\n";

}
?>
</select><br><br>
Sub Category
<select name="subcategory">
<option>Select a Main Category First</option>
</select><br><br>
<input type="reset" name="reset" value="Reset">
<input type="submit" name="" value="Submit">

<?php $sJavaScript = $sJavaScript."\n}\n}\n"; ?>
<SCRIPT LANGUAGE="JavaScript"><?php echo "$sJavaScript"; ?></SCRIPT>
</form>
</center>
<?php
}

briansol

thanks for that link-- that is EXACTLY what i am looking for.

Now-- to implement it 🙂

I will keep the board up to date on how this goes.

I had given up on it for a while- but it looks like its back 🙂

thanks so much.