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.
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[i][3] && s == products[i][4]) {
// product_no = matched_product_id
p.value = products[i][0];
return;
}
}
}
</script>
function filter() { var c = document.getElementById('c'); // Color var s = document.getElementById('s'); // Size var n = document.getElementById('n'); // Name
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[i][3]) && (s == products[i][4]) && (n == products[i][1])) { // product_no = matched_product_id p.value = products[i][0]; return; } } } </script>
I'm not sure where you're getting the elements from with ID's of 's' and 'c', post the rest of the code and we might be able to help better.
Thanks for the reply. Your suggestions didn't work either, but I played around some more, and this is the latest iteration, which also doesn't work.
To sum up, I need to filter based on 3 distinct criteria: product name, color, and size. The color and size is selected by the user, but the product name is automatically set depending on the form in use.
(I'll also just quickly mention that ultimately, PHP isn't an option, so I definitely need to figure out how to use JS for this...)
Right now, this is on a server with PHP, so that I can use print_r($_POST). Ultimately, php won't be available though, so I need to do this in JS... The submitted values look like this:
Before you post, read our: 
