Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Urgent: Help with filter script

    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:

    PHP Code:

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

    PHP Code:
    <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 
    document.getElementById('c');  // Color
         
    var document.getElementById('s');  // Size

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

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

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

  • #2
    Regular Coder
    Join Date
    May 2005
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use a hidden input element with a value of "Product-A", "...-B" etc.

    PHP Code:

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

    PHP Code:
    <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 
    document.getElementById('c');  // Color
         
    var document.getElementById('s');  // Size
         
    var document.getElementById('n'); // Name

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

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

         
    c.options[c.selectedIndex].value;
         
    s.options[s.selectedIndex].value;
         for (var 
    0products.lengthi++) {
             
    // if match color & size
             
    if ((== products[i][3]) && (== products[i][4]) && (== 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.

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    PHP Code:
    <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 document.getElementById('n'); // Name

    function filter(theForm) {                            
      var 
    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=0i<products.lengthi++) {
          if ((
    colors == products[i][3]) && (sizes == products[i][4]) && (== 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:

    PHP Code:
    <!-- 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:

    PHP Code:
    Array ( [product] => Product_A [color] => Green [size] => 10 [product_no] => [submit] => submit 
    Help?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •