Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Filter Script / Dynamic Select Fields: Part Deux

Posted on 2006-11-11
4
212 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

808 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