Solved

Filter Script / Dynamic Select Fields: Part Deux

Posted on 2006-11-11
4
203 Views
Last Modified: 2009-07-29
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
Comment
Question by:n00b0101
  • 3
4 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 17921586
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
 

Author Comment

by:n00b0101
ID: 17921737
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17921892
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17924728
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

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now