<select> drop down and window.location

Expand Post »

hi all

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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 ;
}
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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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

Similar Threads

pass session variable with window.location.href jsp in JSP
window location using frames in JavaScript / DHTML / AJAX
Mutiple select drop down box ...... in JavaScript / DHTML / AJAX
Problem with window.location in Safari (mac only) in JavaScript / DHTML / AJAX
Is it possible to pass hidden value in <select> drop down menu? in PHP

vinpkl

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Nov 2008

Permalink

Jun 17th, 2009

Re: <select> drop down and window.location

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!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><br><br>
<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><br><br>
<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>
<!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><br><br>
<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><br><br>
<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

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: vertical alignment question

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: error 800a0400 line: 1 char: 1

DaniWeb Message

Cancel Changes

User Name
Password