ASP 101 - Active Server Pages 101 - Web03
The Place ASP Developers Go!

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash



 Top ASP 101 Stories Top ASP 101 Stories
What is ASP?
VBScript Classes: Part 1 of N
Migrating to ASP.NET

QUICK TIP:
Disable Buffering to Simplify Debugging
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates


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. Wouldn’t 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


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers