Ideally, you would have every manufacturers in a database.
The pseudo code would be:
1) fetch a list of the furnishers in the DB
2) itterate over the list, and append <options> elements to the drop down, with the database id of the furnisher to display
3) upon form submit, redirect to a page which take this furnisher id as a parameter, and fetch from the db only products from this furnisher.
About this: you will need server side logic to realize this.
Javascript is a client side language, ie: it runs in the user browser.
The database and filtering should be done on the server side, using PHP, ASP, JSP or any other language you feel confident in.
In fact, it is doable using javascript only, but this means that every informations about every products and furnisher must be embedded into the page, and tagged to allow javascript to hide/show only relevant parts.
Not the most recommanded way of doing things.
Secondly, your HTML decalration is basically incomplete in your code up there.
Normally, a <form> element takes an "name", "action" and "method" parameter, that tells the browser where to send the form and how to encode the content. If not specified, it will send it to the current page using a GET request.
The "name" parameter is useful when you have severals forms, and you need to distinguish them, like a login and a search function in the same page.
And it needs, for each form, something to submit it's data. You cannot submit several forms at the same time.
But your form can hold any number of elements.
Your "search category" and "product description" fields being outside of your form, they won't be taken in account in the submit.
And, although you gave an html page in your select, it won't go to that page.
If you have a server side language at hand, you have to handle the submit on the page generation.
In your case, if you only have javascript at hand, you have to intercept the standard submit event, check the selected element in the drop down, and rewrite the browser location, like this:
HTML Code:
<html>
<body>
<script type="text/javascript">
function redirect(){
dd=document.frm1.manufacturer;
if(dd.selectedIndex===0){
alert('please choose a manufacturer');
}
else{
page=dd.options[dd.selectedIndex].value;
alert('Now going to the page '+page);
top.location=page;
}
}
</script>
<table border="0" width="100%">
<tr>
<td>Product Search by Manufacturer:<br />
<form name="frm1" method="post">
<select name="manufacturer" style="width: 200px;">
<option value="">Choose a Manufacturer</option>
<option value="manufacturer_123.html">123</option>
<option value="manufacturer_456.html">465</option>
<option value="manufacturer_789.html">789</option>
</select>
<input type="button" value="filter" onclick="javascript:redirect();"/>
</form>
</td>
<td>Product Search by Category:<br />
<select name="category" style="width: 200px;">
<option></option>
</select>
</td>
<td>Product Description:<br />
<input type="text" name="description" />
</td>
</tr>
</table>
</body>
</html>
