Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

ONe dropdown dependent on another

Status
Not open for further replies.
reportingbuzz

reportingbuzz

MIS
Feb 9, 2007
46
US
Hi,

I have built a small ASP sample page which pulls data from the Northwind tables - Categories, Products.

I have already populated the 2 dropdown boxes. I have an onchange event attached to the first select box - Category so that with change to the dropdwon, the 2nd dropdown would show the respective products for that category. How can I link the two. How can I take the selected value of the Category and pass it to the Products dropdown.

Thanks.

My code is:

Code: 
<!--#INCLUDE Virtual="/Scripts/Padmaja/Testing2/DB_Northwind.asp"-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<html>
<head>
<title>Dependable Drop Down</title>
<script type="text/javascript">
function submitValue(str)
{
	f = document.Customers
	str = f.category.value;
	f.hCategory.value = str;
}
</script>
</head>
<body>
<form name="Customers" id="Customers" method="POST" action="">
<input type="text" name="hCategory">
<%

Dim rs
Set rs = Server.CreateObject("ADODB.Recordset")
sSQL = "SELECT CategoryID, CategoryName FROM Categories"

rs.open sSQL, Conn

Dim aCategory

If not rs.EOF Then
    'Dump the recordset into the above array
    aCategory = rs.getRows()

    rs.Close
    Set rs = Nothing

End If

Dim iRows
%>

Category:
<select name="category" id="category" onChange="submitValue(this);">
	<option value="">Select Categories</option>
	<%
	For iRows = 0 to UBound(aCategory,2)
	%>
	<option value="<%=aCategory(0,iRows)%>"><%=aCategory(1,iRows)%></option>
	<%
	Next
	%>
</select>

<%


Dim rs1
Set rs1 = Server.CreateObject("ADODB.Recordset")
sSQL1 = "SELECT CategoryID, ProductName, ProductID FROM Products " & _
		"where CategoryID = " & Request.form("hCategory") & " " & _
		"order by ProductName "

'response.Write sSql1
'response.end
rs1.open sSQL1, Conn

Dim aProducts

If not rs1.EOF Then
    'Dump the recordset into the above array
    aProducts = rs1.getRows()

    rs1.Close
    Set rs1 = Nothing

End If

%>
Products:
<select name="product" id="product">
	<option value="">Select Product</option>
	<%
	For i = 0 to UBound(aProducts,2)
	%>
	<option value=""><%=aProducts(1,i)%></option>
	<%
	Next
	%>
</select>


</form>
</body>
</html>
 
Sort by date Sort by votes
OK. I changed the function to this:

Code: 
function submitValue(str)
{
	f = document.Customers
	str = f.category.value;
	f.hCategory.value = str;
	f.submit();
}

Since the page is submitted now, I can see the right products for the selected Category. But since the page is reloaded, the selected category no longer is visible. How can I avoid such a scenario?

Thanks.
 
Upvote 0 Downvote
Put this in your Category dropdown:

Code: 
Category:
<select name="category" id="category" onChange="submitValue(this);">
    <option value="">Select Categories</option>
    <%
    For iRows = 0 to UBound(aCategory,2)
    %>
    <option value="<%=aCategory(0,iRows)%>" [!]<%(if(Request.form("hCategory") = aCategory(1,iRows)) then "selected='selected'" else "" end If)%>[/!]><%=aCategory(1,iRows)%></option>
    <%
    Next
    %>
</select>

<.

 
Upvote 0 Downvote
I tried this:

Code: 
Category:
<select name="category" id="category" onChange="submitValue(this);">
    <option value="">Select Categories</option>
    <%
    For iRows = 0 to UBound(aCategory,2)
    %>
    <option value="<%=aCategory(0,iRows)%>"<%if(Request.form("hCategory") = aCategory(1,iRows)) then Response.Write "selected=""selected""" else Response.Write "" end If%>><%=aCategory(1,iRows)%></option>
    <%
    Next
    %>
</select>

I do not get any erros, but at the time the last select category that I selected goes away sinc the Javascript function gets to load the page.

I get the right products, but the categories selected is no longer displayed.

Thanks.
 
Upvote 0 Downvote
Code: 
<option value="<%=aCategory(0,iRows)%>"<%if(Request.form("hCategory") = aCategory(1,iRows)) then [!]Response.Write "selected=""selected""" [/!]else Response.Write "" end If%>><%=aCategory(1,iRows)%></option>

The part I have highlighted is not syntactically correct, you have to use single quotes like this

Code: 
Response.Write "selected='selected'"

You also have too many quotation marks.

Just substitute the code I wrote for what you highlighted and you should have no problem.

<.

 
Upvote 0 Downvote
I fixed this. I used AJAX to build my 2nd drop-down which is dependent on the 1st dropdown. So now I do not lose the last Category that I selected.

Thanks for the input.

My code for anyone to use to build dependable drop-downs is here. If you think I can better this code, please let me know.

Thanks.

Code: 
<!--#INCLUDE Virtual="/Scripts/Padmaja/Testing2/DB_Northwind.asp"-->
<%
'get the Products using a function

Cat_ID = Request.Querystring("ID")

if Cat_ID = "" Then
	'Response.Write "Select a Category"
Else
	Call getProducts(Cat_ID)
End If

Function getProducts(CatID)

if CatID = "" Then
	Response.Write "Please select a Category"
Else

Set rs1 = Server.CreateObject("ADODB.Recordset")
sSQL1 = "SELECT CategoryID, ProductName, ProductID FROM Products " & _
		"where CategoryID = " & CatID & " " & _
		"order by ProductName "

'Response.write sSQL1
'Response.End

rs1.open sSQL1, Conn

Dim aProducts

If not rs1.EOF Then
    'Dump the recordset into the above array
    aProducts = rs1.getRows()

    rs1.Close
    Set rs1 = Nothing
End If

%>
Products:
<select name="product" id="product">
	<option value="">Select Product</option>
	<%
	For i = 0 to UBound(aProducts,2)
	%>
	<option value=""><%=aProducts(1,i)%></option>
	<%
	Next
	%>
</select>
<%
End If
Response.End
End Function
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<html>
<head>
<title>Dependable Drop Down</title>
<script type="text/javascript">

var xmlHttp

function showProducts(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}

var url="Dependaple_DD.asp"
url=url+"?ID="+str
//alert(url);
//url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged2
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
//alert("ID is sent to the form");
}

function stateChanged2()
{
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{
		var strHTML = xmlHttp.responseText;
		//alert(strHTML);
		document.getElementById("content_model").innerHTML=strHTML;
		//alert("State Changed");
		//alert(xmlHttp.responseText);
		//document.getElementById("content_products").innerHTML=xmlHttp.responseText
	}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest) //Safari, Mozilla browers
{
	objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject) //IE browsers
{
	objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

</script>

</head>
<body>
<form name="Customers" id="Customers">
<input type="hidden" name="hCategory">
<%

Dim rs
Set rs = Server.CreateObject("ADODB.Recordset")
sSQL = "SELECT CategoryID, CategoryName FROM Categories"

rs.open sSQL, Conn

Dim aCategory

If not rs.EOF Then
    'Dump the recordset into the above array
    aCategory = rs.getRows()

    rs.Close
    Set rs = Nothing

End If

Dim iRows
%>

Category:
<select name="category" id="category" onchange="showProducts(this.value);">
    <option value="-1">Select Categories</option>
    <%
    For iRows = 0 to UBound(aCategory,2)
    %>
    <option value="<%=aCategory(0,iRows)%>"><%=aCategory(1,iRows)%></option>
    <%
    Next
    %>
</select>
<noscript><input type="submit" name="GetProducts" value="Get Products"></noscript>

 <span id="content_model"><%Call getProducts(category)%></span>

</form>
</body>
</html>
 
Upvote 0 Downvote
yeah, apologies on the "", I'm from a javascript background, wasn't aware of the "" to escape.

<.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

penguinspeaks
  • Locked
  • Question
Parse a database field that is comma delimited and input the results into another table
Replies
0
Views
185
penguinspeaks
penguinspeaks
penguinspeaks
  • Locked
  • Question
READ TEXT FILE BASED ON VARIABLE 1
Replies
2
Views
208
guitarzan
guitarzan
penguinspeaks
  • Locked
  • Question
Return to current location on page after asp processes.
Replies
2
Views
216
penguinspeaks
penguinspeaks
JScannell
  • Locked
  • Question
Border issue with Google Chrome on an Android phone
Replies
0
Views
191
JScannell
JScannell
leifoet
  • Locked
  • Question
Multi-selection dropdown list does not work
Replies
0
Views
92
leifoet
leifoet

Part and Inventory Search

Sponsor

Back
Top