Dependent Lists
JavaScript & ASP Interaction
By Greg McCormick
Introduction
While developing a Classified Ads application I ran into an interesting issue
while building the Submit New Ad form. I wanted to assign a category and
a subcategory to the ad (Click here for an Example).
I was doing this by using two dropdown lists. The problem arises
after you select your choice in the first list. Say you chose Automobiles. In
the second list you have subcategories that contain everything but the kitchen
sink. Really, you only want the Automobile related subcategories to show up in
the list.
We have all seen JavaScript lists that when an option in the first list is
selected the second list shows items that are related to the first list. This is
a seemingly easy feat to pull off in JavaScript but what if you are an ASP
developer and you want to pull the information for the lists from a database?
You could reload the page and populate the second list using the option selected
from the first list. But what if you have already filled out other form objects
such as text fields containing a description of the item you are selling, price,
phone number, etc.? You have to send that information to the page and repopulate
the form. Wouldnt it be easier if you could just use JavaScript and ASP
together to create the dependant lists? The code below is devised to do just
that.
The Database
The database
that I am using has two tables that look like this:
Category Table
|
Name |
Properties |
Description |
|
Category_id |
Autonumber |
Key of the table |
|
Category |
Text |
Name of the Category |
Subcategory Table
|
Name |
Properties |
Description |
|
Subcategory_id |
Autonumber |
Key of the table |
|
Subcategory |
Text |
Name of the Subcategory |
|
Subcategory_of |
Number |
This category that this is a subcategory of. |
The Code
The code below is what was actually used to produce an ASP page that operates
the same as the Example.
The code in Green is ASP,
Blue is JavaScript and Black is HTML.
|
<!--#include file ="shared/dbOpenConn.inc"-->
<%Response.Buffer =
true%>
<HTML>
<HEAD>
<%
connstring =
"driver={sqlserver};server=kingtest2;uid=classified_user;pwd=class;"
set
conn = dbOpenConn(connstring)
sqlstring = "select * from
classfd_subcatagory"
set rs =
conn.execute(sqlstring)
x=0
%>
<script language = "JavaScript">
function
subcat()
cat =
document.subad.catagory[document.subad.catagory.selectedIndex].value;
url
= "submitad.asp?cat="
url = url + cat;
window.location.href< =
url;
function sublist(inform,
selecteditem)
inform.subcatagory.length = 0
<%
count= 0
y=0
do while not rs.eof
%>
x = <%= trim(y) %>
subcat =
new Array();
subcatagorys = "<%= trim(rs("subcatagory"))%>"
subcatagoryof =
"<%= trim(rs("subcat_of"))%>"
subcatagoryid =
"<%=
trim(rs("subcatagory_id"))%>"
subcat[x,0] =
subcatagorys;
subcat[x,1] = subcatagoryof;
subcat[x,2] =
subcatagoryid;
if (subcat[x,1] == selecteditem)
{
var option<%= trim(count)
%> = new Option(subcat[x,0],
subcat[x,2])
inform.subcatagory.options[inform.subcatagory.length]=option
<%= trim(count)%>
<%
count = count + 1
y =
y + 1
rs.movenext
loop
%>
</script>
<title>Submit an
Ad</title>
<LINK rel="stylesheet" type="text/css"
href="style/summary.css">
</HEAD>
<BODY onLoad =
"sublist(document.subad,document.subad.catagory[document.subad.catagory.selectedIndex].value)">
<!--#include
file="shared/menu.inc"-->
<%
url = "profile.asp" if not
request.cookies("userprofile")=""
then
ln=Request.Cookies("userprofile")("lastname")
fn=Request.Cookies("userprofile")("firstname")
up=Request.Cookies("userprofile")("workphone")
hp=Request.Cookies("userprofile")("homephone")
em=Request.Cookies("userprofile")("email")
%>
<form
name = subad action = "thankyouad.asp"
>
<Table>
<tr>
<td>First
Name</td>
<td>Last
Name</td>
</tr>
<tr>
<td ><Input
NAME="NameFirst" size ="30" value=<%=fn%>
></td>
<td><Input NAME="NameLast" size ="40"
value=<%=ln%>></td>
</tr>
<tr>
<td>Work
Phone</td>
<td>Home
Phone</td>
</tr>
<tr>
<td><Input
NAME="workphone" MaxLength="15" value="<%=wp%>" ></td>
<td><Input
NAME="homephone" MaxLength="15" value="<%=hp%>"
></td>
</tr>
<tr>
<td>Email</td>
</tr>
<tr>
<td><Input
NAME="email" MaxLength="50" value=<%=em%>></td>
</tr>
</table>
<table>
<tr>
<td>Headline</td>
</tr>
<tr>
<td><Input
Name = "headline" MaxLength = "100" value=""
size=50></td>
</tr>
<tr>
<td>Description</td>
</tr>
<tr>
<td><textarea
name = "description" rows = 5 cols =
50></textarea></td>
</tr>
<%
cat = Request.QueryString("cat")
sqlstring = "SELECT * from classfd_Catagory"
set rs =
conn.execute
(sqlstring)
%>
<tr>
<td>Catagory</td>
</tr>
<tr>
<td><SELECT
id=catagory name=catagory onChange = "sublist(this.form,
document.subad.catagory[document.subad.catagory.selectedIndex].value)">
<OPTION
selected value=""></OPTION>
<%
do until
rs.eof
%>
<OPTION value="<%=
rs("catagory_id")%>"><% =
rs("catagory")%></OPTION>
<%
rs.movenext
loop
set rs =
nothing
%>
</SELECT></td>
</tr>
<tr>
<td><SELECT
id = "subcatagory" name="subcatagory">
<Option selected
value="none">-------------------------</option>
</SELECT>
</td>
</tr>
<tr>
<td>Price</td>
<tr>
<tr>
<td><INPUT
type="text" id=price
name=price></td>
</tr>
<td><Input
type=submit value = "Submit" id=submit1 name=submit1
></td>
</tr>
</table
>
</form>
<%
Else
Response.Redirect url
End
if
%>
</BODY>
</HTML> |
How this works
The ASP code is executed and displayed in the browser as straight HTML so the
JavaScript just executes as if the results from the ASP code were entered by
hand. This is a very simple but under used theory. If you view the source of the
example page you can see that the ASP loops through the recordset and writes the
same JavaScript code for each item in the table. Here is an example of what that
will look like:
|
x = 0
subcat = new Array();
subcatagorys =
"Community Events"
subcatagoryof = "2" subcatagoryid = "2"
subcat[x,0] = subcatagorys;
subcat[x,1] =
subcatagoryof;
subcat[x,2] = subcatagoryid;
if (subcat[x,1] ==
selecteditem){
var option0 = new Option(subcat[x,0], subcat[x,2])
inform.subcatagory.options[inform.subcatagory.length]=option0
}
x =
1
subcat = new Array();
subcatagorys = "Garage/Yard
Sale"
subcatagoryof = "2"
subcatagoryid = "3"
subcat[x,0] =
subcatagorys;
subcat[x,1] = subcatagoryof;
subcat[x,2] =
subcatagoryid;
if (subcat[x,1] == selecteditem){
var option1 =
new Option(subcat[x,0], subcat[x,2])
inform.subcatagory.options[inform.subcatagory.length]=option1
} |
About the Author
I am a developer in Houston, TX and would be glad to answer any questions
that I can about this article.
Greg McCormick