Forum Moderators: phranque
Any help?
Thanks
[edited by: trillianjedi at 5:35 pm (utc) on Jan. 8, 2007]
[edit reason] TOS [/edit]
$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.)
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.
<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"> </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!