How can i make a product selector like this?

[slimnutty5000]

I want to make a product selector very similar to the one on this site. <snip> I would like to do it using a database if possible, (I am using PHP and mySQL on my site) I think the most important part that i want it the appearing of the next drop down when the first selection is clicked, i dont know how to do this function.

Any help?

Thanks

[edited by: trillianjedi at 5:35 pm (utc) on Jan. 8, 2007]
[edit reason] TOS [/edit]

[trillianjedi]

Hi SlimNutty,

We can't do specifics here I'm afraid. If you describe what it is you need to do, I'm sure we can help.

TJ

[slimnutty5000]

Ok then well...
What i want to do is have an initial drop down menu, to select by "Brand", then when clicked, would show a second menu to select by "Model", then when clicked would bring up a table showing the appropriate product, item number, description, etc...(which i have all in a database). Not looking for any add to cart or anything, just product information. To help people narrow down the compatible product for their device.

[rocknbil]

Some perl baby-talk, extracting values from database. First build your category/manufacturer select list:

$categories = qq¦
<select name="category" id="category">
<option value="">Select Category</option>¦;

select id, title from product_categories order by title;
while (($id,$title) = $sth->fetchrow_array) {
$categories .= qq¦<option value="$id">$title</option>\n¦;
}

$categories .= '</select>';

When submitted, it takes the selected category and bulds a subcategory select list (I.E., model:)

$subcat = qq¦
<input type="hidden" name="category" value="$qs{'category'}">
<select name="subcat" id="subcat">
<option value="">Select Subcategory/Model</option>¦;

select id, title from subcategories order by title;
while (($id,$title) = $sth->fetchrow_array) {
$subcat .= qq¦<option value="$id">$title</option>\n¦;
}

$subcat .= '</select>';

So now you use the hidden category and selected subcategory to get all the products that intersect the two values:

select id, title from products where category='$qs{'category'}' and subcategory = '$qs{'subcat'}' order by title;

You can use Javascript to submit the forms as soon as the list is changed, but be sure to include a "next" submit button for acessibility (if J.S. is disabled.)

[henry0]

rocknbil, I am wondering how we could apply the same logic in PHP without some sort of AJAX
The first submit as it seems looks like going "nowhere" so I guess it is then the equivalent of SELF?
But then I am not sure of the result because even before doing anything if the second select depends on the first one the as soon as "opened" that page will show a MySQl error
Or I very possibly do not get your concept :)

[slimnutty5000]

Yeah i agree. Thanks, but can you be a little more specific, i dont know much AJAX, and also need a little help on the Javascript part of it if possible. Thanks

[rocknbil]

rocknbil, I am wondering how we could apply the same logic in PHP without some sort of AJAX
The first submit as it seems looks like going "nowhere" so I guess it is then the equivalent of SELF?

I was trying to keep it simple and break it down into the main functions you'd need to construct such an interface. What I posted in itself is not complete code. I was showing how you build the lists then output based on what is selected.

For a perl script or a PHP script:

if ($qs{'subcategory'}) { # output list of items in this subcategory }
elsif ($qs{'category'}) { #output select subgategory page }
else { #output select category page }

And you are correct, it would be a single script that you submit to. Note in my logic above - when you submit the subcategory, category will ALSO be present - so it's important to have "if subcategory" first in the else/if, otherwise it will always go to the subcategory select page.

Javascript woud help by being able to auto-submit in an onChange of the select lists, but it's important to remember Javascript may not be enabled so you should always process it server-side as if it weren't.

[slimnutty5000]

Heres part of my code that i want to do.
The DIV is the part where i would want the results to show. I want that table to be hidden until you click "find your tip".

<form action=""><table width="80%" align="center" class="blueContent">
 
 <tr>
 <td width="103" height="30" align="right" class="home-content"><div align="left"><font color="#f26a20"><img src="images/n1.gif" width="20" height="20" align="absmiddle" /> Brand:</font></div></td>
 <td width="344" height="30">
 <select name="brands" size="1" class="TableContent">
 <option>- Select your brand -</option>
 <option label="group0">Audiovox</option>
 <option>iPod</option>
 <option>Kyocera</option>
 <option>LG</option>
 <option>Motorola</option>
 <option>Nextel</option>
 <option>Nokia</option>
 <option>Samsung</option>
 <option>Sanyo</option>
 <option>Siemens</option>
 <option>Sony Ericsson</option>
 <option>Treo</option>
 </select> 
</td>
 </tr>
 <tr>
 <td height="30" align="right" class="home-content"><div align="left"><font color="#f26a20"><img src="images/n2.gif" width="20" height="20" align="absmiddle" /> Model:</font></div></td>
 <td height="30">
 <select name="models" size="1" class="TableContent">
 <option value=""></option>
 </select> </td>
 </tr>
 <tr>
 <td height="30" align="right" class="home-content">&nbsp;</td>
 <td height="30"><label>
 <input name="Submit" onclick="showhide('results');" type="submit" class="blueContent" style="font-weight:bold; color:#990000;" value="Find Your Tip!" />
 </label></td>
 </tr>
 </table>
 </form> 
 <div id="results" style="display:none"><p class="headline">Your Results </p>
 <table width="100%" border="0" cellpadding="1">
 <tr>
 <td bgcolor="#CCCCCC"><table width="100%" border="0" align="center" cellpadding="2" cellspacing="2" class="TableContent">
 <tr>
 <td width="33%" class="TableHeader">Image</td>
 <td width="22%" class="TableHeader">Tip Item # </td>
 <td width="17%" class="TableHeader">CLA # </td>
 <td width="28%" class="TableHeader">Bluetooth Capable? </td>
 </tr>
 <tr>
 <td bgcolor="#FFFFFF"><img src="" width="200" height="150" alt="" /></td>
 <td align="center" bgcolor="#FFFFFF">06-MT-T3</td>
 <td align="center" bgcolor="#FFFFFF">06-MT-CLA3 </td>
 <td align="center" bgcolor="#FFFFFF">Yes</td>
 </tr>
 </table></td>
 </tr>
 </table></div>

Thanks for any help!