Urgent: Need help with filter script

[jjfletch]

I'm really hoping someone can help me out with this, it's pretty urgent that I finish this thing and I'm hopelessly stuck! :chomp:

I have a page that allows a customer to add products to their shopping cart. For long and boring reasons, a different product number is used for every size and color of any particular item.

For example, my product list looks something like this:

ID Product Name ProductSKU Color Size
-----------------------------------------------------
3345 Product-A 24062-19 Green 8
3346 Product-A 24062-20 Green 10
3347 Product-A 24063-19 Red 8
3348 Product-A 24063-20 Red 10
3349 Product-B 24064-19 Blue 8
3350 Product-B 24064-20 Blue 10
3351 Product-B 24065-19 Yellow 8
3352 Product-B 24065-20 Yellow 10


My page has a form for each product, and this form has two select fields, one for color, one for size. What I'm trying to do is to filter results based on the color selection, and the size selection in order to retrieve the correct id number. I also need to figure out how to filter based on the product name, which is not a select item, but as each form is for a particular product, I figure there must be some way to filter based on this as well. This is where I'm stuck. I can't figure out how to set the product name as part of the filter process.

The HTML for my page looks like this:



<!-- PRODUCT A FORM -->

<tr valign="top">
<td nowrap>
<font color="red"><b>PRODUCT A</b></font>
<P>Cotton T-Shirt<br />
</td>

<td>PRODUCT A IMAGE

<p>
<form name="cartadd" method="POST" action="somescript.php"><B>Price: $9.00</B>
<P><b>Color:</b>
<select name="color" >
<option>Select a Color...</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>

<P>
<b>Size</b>
<select name="size">
<option value="8">8</option>
<option value="10">10</option>
</select>

<p><input type="submit" value="Add To Shopping Cart"></p>
</form>


<!-- PRODUCT B FORM -->

<tr valign="top">
<td nowrap>
<font color="red"><b>PRODUCT B</b></font>
<P>Cotton T-Shirt<br />
</td>

<td>PRODUCT B IMAGE

<p>
<form name="cartadd" method="POST" action="somescript.php"><B>Price: $9.00</B>
<P><b>Color:</b>
<select name="color" >
<option>Select a Color...</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
</select>

<P>
<b>Size</b>
<select name="size">
<option value="8">8</option>
<option value="10">10</option>
</select>

<p><input type="submit" value="Add To Shopping Cart"></p>
</form>




My javascript currently looks like this:


<script>
var products = [
[3345, 'Product-A', '24062-19', 'Green', 8],
[3346, 'Product-A', '24062-20', 'Green', 10],
[3347, 'Product-A', '24063-19', 'Red', 8],
[3348, 'Product-A', '24063-20', 'Red', 10],
[3349, 'Product-B', '24064-19', 'Blue', 8],
[3350, 'Product-B', '24064-20', 'Blue', 10],
[3351, 'Product-B', '24065-19', 'Yellow', 8],
[3352, 'Product-B', '24065-20', 'Yellow',10]
];

function filter()
{
var c = document.getElementById('c'); // Color
var s = document.getElementById('s'); // Size

if (c.selectedIndex < 0 || s.selectedIndex < 0)
return;

// product_no
var p = document.getElementById('p');

c = c.options[c.selectedIndex].value;
s = s.options[s.selectedIndex].value;
for (var i = 0; i < products.length; i++) {
// if match color & size
if (c == products[3] && s == products[4]) {
// product_no = matched_product_id
p.value = products[0];
return;
}
}
}
</script>

 

[trollacious]

I would use objects with named properties rather than the arrays within an array you have.

var products = new Array(), pi=0;

products[pi++]= {ID:3345,Name:'Product-A',SKU:'24062-19',Color:'Green',Size:8};
products[pi++]= {ID:3346,Name:'Product-A',SKU:'24062-20',Color:'Green',Size:10};
products[pi++]= {ID:3347,Name:'Product-A',SKU:'24063-19',Color:'Red',Size:8};
products[pi++]= {ID:3348,Name:'Product-A',SKU:'24063-20',Color:'Red',Size:10};
products[pi++]= {ID:3349,Name:'Product-B',SKU:'24064-19',Color:'Blue',Size:8};
products[pi++]= {ID:3350,Name:'Product-B',SKU:'24064-20',Color:'Blue',Size:10};
products[pi++]= {ID:3351,Name:'Product-B',SKU:'24065-19',Color:'Yellow',Size:8};
products[pi++]= {ID:3352,Name:'Product-B',SKU:'24065-20',Color:'Yellow',Size:10};

I don't see any form elements with IDs of c, s, or p. Your example is obviously contrived and not the real thing, and is missing a variety of things relevant to your problem.

It'd help if you copied and pasted your REAL code in here rather than something you made up as an example to us so we can see what the browser is actually dealing with.

Real code = real answers.
Fake code = fake answers.

Lee

 

[BabyJeffy]

Easy solution. Set an onchange even on your select elements to trigger an AJAX request backend (passing through the thing you want filtered). Then do a database lookup. That'll work.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[BillyRayPreachersSon]

What happens if a user wants to buy two different colours or sizes of product A... can they do that with your current system?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]