Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 223
  • Last Modified:

Filter Script / Dynamic Select Fields: Part Deux

Okay, although I was helped in another thread, I still haven't figured out how to accomplish what I want, so I awarded points and am starting another thread in the hopes of getting some more help!

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

The JS code looks like this:

=============================================
<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 = '';
var sizes = 8;  
var n = document.getElementById('n');

function filter() {
  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>
=============================================


The HTML looks like this:
=============================================
<!-- PRODUCT A FORM -->

<form name="cartadd" method="POST" action="somescript.php" onsubmit="return filter()">
<input type="hidden" name="product" value="Product-A" id="n" />
<B>Price: $9.00</B>
<p><b>Color:</b>
<select name="color" id="c" onchange="colors=this.value">
<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" onchange="sizes=this.value">
<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()">
<input type="hidden" name="product" value="Product-B" id="n" />

<B>Price: $9.00</B>
<p><b>Color:</b>
<select name="color" id="c" onchange="colors=this.value">
<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" onchange="sizes=this.value">
<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>  
=============================================


Sadly, it's still not picking up the product_no. Right now, I'm on a server that does have PHP, so I'm using print_r($_POST) to determine what's actually being posted, and it's this:

=============================================
Array ( [product] => Product_A [color] => Green [size] => 10 [product_no] => [submit] => submit )
=============================================
0
n00b0101
Asked:
n00b0101
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
The n is not set when you do

var n = document.getElementById('n');
out of the blue.
You want to  change

<form name="cartadd" method="POST" action="somescript.php" onsubmit="return filter()">
to
<form name="cartadd" method="POST" action="somescript.php" onsubmit="return filter(this)">
Notice the (this)

then change


function filter() {
  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;
}  

to


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


and you can remove the
onchange="colors=this.value"

onchange="sizes=this.value"
0
 
n00b0101Author Commented:
Thanks for the reply.  I am new to JS, so I'm trying to make sense out of things the best  I can.

Anyways, I made the changes as you suggested, but that doesn't change the submitted values at all.  It still doesn't pick up the product_no, which is ultimately what I need it to do.  

Just to clarify, my script now looks like this:

===========================

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

===========================

My HTML now looks like this:

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

But, my submitted values still look like this:

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


Any other ideas/suggestions?
0
 
Michel PlungjanIT ExpertCommented:
you also need to remove the javascript error inducing n=document.getElement... line outside the functions. I cannot test until tomorrow since I am not at home
0
 
Michel PlungjanIT ExpertCommented:
You have two elements with the same id.
USe form elements access throughout:

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])) {
        theForm.product_no.value = products[i][0];
        return true;
      }  
    }
  }
  return false;
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now