<select> drop down and window.location

hi all

i have two dynamic drop downs of dealer id and category id which work properly with window.location

var dealerid;
function getList(xyz)
{
window.location='manage_products.php?category_id=' + xyz;
}
function getProducts(dealer_id)
{
var catid=document.form1.category.value;
window.location='manage_products.php?dealer_id=' + dealer_id + "&category_id="+catid ;
}

but now i want to add static drop down of sub category and make use of window.location which i m not able to do

<select name="sub_catg" onchange="getSb(this.value)"  id="sub_catg">
<option>Select Sub Category</option>
<option value="Batteries">Batteries</option>
<option value="Leather & PU Cases">Leather &amp; PU Cases</option>
<option value="Crystal & Rubber Coated Cases">Crystal &amp; Rubber Coated Cases</option>
<option value="Car Mounts & USB Cradles">Car Mounts &amp; USB Cradles</option>
<option value="AC Chargers & Car Chargers">AC Chargers &amp; Car Chargers</option>
</select>

This is function that is not working

<script language="javascript">
var subid=document.form1.sub_catg.value;
function getSb(subid)
{
window.location='manage_products.php?dealer_id=' + dealer_id + "&category_id="+catid + "&sub_catg=" + subid ;
}
</script>

vineet

vinpkl

Newbie Poster

7 posts since Nov 2008

Reputation Points: 10

Solved Threads: 0

2 Years Ago

All the 3 functions must be nested, so that it will be able to work on changing the current location of your window.

From this demo, the 3 <select> elements, have the same values and options, and copied from your posted code.

- Reset all values and options as needed.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>

<script type="text/javascript">
<!--

var Combo = function( subid, dealer_id, category_id ) {
   this.subid = subid;
   this.dealer_id = dealer_id;
   this.category_id = category_id;
 };

Combo.prototype = {
   url : "manage_products.php?",
   getValue : function( ids ) {
   this.whatID = (( document.getElementById ) ? document.getElementById( ids ) : document.all[ ids ] ).value;
   return encodeURIComponent( this.whatID );
   },
   subid : this.subid,
   dealer_id : this.dealer_id,
   category_id : this.category_id, 
   go : function( where ) {
   window.location = where;
   }, 
   getList : function() {
   this.go( this.url + "dealer_id=" + this.getValue( this.dealer_id ));
   },
   getProducts : function() {  
   this.go( this.url + "dealer_id=" + this.getValue( this.dealer_id ) + "&category_id=" + this.getValue( this.category_id ));
   },
   getSb : function() {
   this.go( this.url + "dealer_id=" + this.getValue( this.dealer_id ) + "&category_id=" + this.getValue( this.category_id ) + "&sub_catg=" + this.getValue( this.subid ))
   }
}; 

var browse = new Combo("sub_catg", "dealer_id", "category_id"); // Specify the Ids of the three <select> elements, referred as the 3 parameters inside the browse object.

// -->
</script>
</head>
<body>
<div>
<form id="form1" name="form1" action="#" onsubmit="return false;">
<div>
<label for="dealer_id">Get Products: <select id="dealer_id" name="dealer_id" onchange="browse.getList();">
<option>Select Sub Category</option>
<option value="Batteries">Batteries</option>
<option value="Leather & PU Cases">Leather &amp; PU Cases</option>
<option value="Crystal & Rubber Coated Cases">Crystal &amp; Rubber Coated Cases</option>
<option value="Car Mounts & USB Cradles">Car Mounts &amp; USB Cradles</option>
<option value="AC Chargers & Car Chargers">AC Chargers &amp; Car Chargers</option>
</select></label>
<label for="category_id">Category: <select id="category_id" name="category_id" onchange="browse.getProducts();">
<option>Select Sub Category</option>
<option value="Batteries">Batteries</option>
<option value="Leather & PU Cases" selected>Leather &amp; PU Cases</option>
<option value="Crystal & Rubber Coated Cases">Crystal &amp; Rubber Coated Cases</option>
<option value="Car Mounts & USB Cradles">Car Mounts &amp; USB Cradles</option>
<option value="AC Chargers & Car Chargers">AC Chargers &amp; Car Chargers</option>
</select></label>
<label for="sub_catg">Sub Category: <select id="sub_catg" name="sub_catg" onchange="browse.getSb();">
<option>Select Sub Category</option>
<option value="Batteries">Batteries</option>
<option value="Leather & PU Cases">Leather &amp; PU Cases</option>
<option value="Crystal & Rubber Coated Cases" selected>Crystal &amp; Rubber Coated Cases</option>
<option value="Car Mounts & USB Cradles">Car Mounts &amp; USB Cradles</option>
<option value="AC Chargers & Car Chargers">AC Chargers &amp; Car Chargers</option>
</select></label>
</div>
</form>
</div>
</body>
</html>

try to run the whole document first, before you apply modification on the code.

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

<select> drop down and window.location

This article has been dead for over three months