...

View Full Version : Urgent: Help with filter script



jjfletch
11-11-2006, 12:49 AM
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[i][3] && s == products[i][4]) {
// product_no = matched_product_id
p.value = products[i][0];
return;
}
}
}
</script>

VortexCortex
11-11-2006, 03:53 AM
Use a hidden input element with a value of "Product-A", "...-B" etc.




<!-- 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">

<input type="hidden" name="product" value="Product-A" />

<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>


Add an another condition to the "filter".



<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
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.

jjfletch
11-11-2006, 06:10 PM
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...)

Here's the JS:



<script type="text/javascript">
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]
];

var colors = ''; // set by the onchange event. see HTML
var sizes = 8; // default select
var n = document.getElementById('n'); // Name

function filter(theForm) {
var n = theForm.product.value;
var colors = theForm.color.options[theForm.color.selectedIndex].value;
var sizes = theForm.size.options[theForm.size.selectedIndex].value;
if (colors!='' && sizes!='') {
for (var i=0; i<products.length; i++) {
if ((colors == products[i][3]) && (sizes == products[i][4]) && (n == products[i][1])) {
document.getElementById('p').value = products[i][0];
alert(document.getElementById('p').value);
return true;
}
}
}
return false;
}
</script>



And here's the HTML:



<!-- PRODUCT A FORM -->

<form name="cartadd" method="POST" action="somescript.php" onsubmit="return filter(this)">
<input type="hidden" name="product" value="Product-A" id="n" />
<B>Price: $9.00</B>
<p><b>Color:</b>
<select name="color" id="c">
<option>Select a Color...</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select></p>

<p><b>Size</b>
<select name="size" id="s">
<option value="8">8</option>
<option value="10">10</option>
</select></p>

<input type="hidden" id="p" name="product_no" value="">
<p><input type="submit" value="Add To Shopping Cart"></p>
</form>


<!-- PRODUCT B FORM -->

<form name="cartadd" method="POST" action="somescript.php" onsubmit="return filter(this)">
<input type="hidden" name="product" value="Product-B" id="n" />

<B>Price: $9.00</B>
<p><b>Color:</b>
<select name="color" id="c">
<option>Select a Color...</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select></p>

<p><b>Size</b>
<select name="size" id="s">
<option value="8">8</option>
<option value="10">10</option>
</select></p>

<input type="hidden" id="p" name="product_no" value="">
<p><input type="submit" value="Add To Shopping Cart"></p>
</form>


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:



Array ( [product] => Product_A [color] => Green [size] => 10 [product_no] => [submit] => submit )


Help?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum