Select the shoe style, your size, and then the shoe color:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Asynchronus JavaScript Database Driven Drop Down Lists</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<script type="text/javascript">
<!--
var styleId='';
var sizeId='';
function getAvailableSizes(pStyle) {
styleId=pStyle;
var gURL = 'shoeOrderFormGetAvailableSizes.asp?style='+styleId;
//create the Cross-browser XMLHttpRequest object
if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=loadSizes;
xmlhttp.open("GET", gURL, false);
xmlhttp.send(null);
} else if (window.ActiveXObject) { //IE
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
if (xmlhttp) {
xmlhttp.onreadystatechange=loadSizes;
xmlhttp.open('GET', gURL, false);
xmlhttp.send();
}
}
// order is not ready if we just changed item style
document.getElementById('buttons').style.display='none';
if (sizeId!='') {
// we could have changed the shoe style after selecting a size - reset the colors
getAvailableColors('');
}
}
// function to handle asynchronus call
function loadSizes() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) {
document.getElementById('sizes').innerHTML=xmlhttp.responseText;
if (xmlhttp.responseText.indexOf('disabled')<=0) {
document.getElementById('size').focus();
}
}
}
}
function getAvailableColors(pSize) {
sizeId=pSize;
if (pSize=='') {
var gURL = 'shoeOrderFormGetAvailableColors.asp';
}else{
var gURL = 'shoeOrderFormGetAvailableColors.asp?style='+styleId+'&size='+sizeId;
}
//create the Cross-browser XMLHttpRequest object
if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc
xmlhttp=new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
}
xmlhttp.onreadystatechange=loadColors;
xmlhttp.open("GET", gURL, true);
xmlhttp.send(null);
} else if (window.ActiveXObject) { //IE
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
if (xmlhttp) {
xmlhttp.onreadystatechange=loadColors;
xmlhttp.open('GET', gURL, false);
xmlhttp.send();
}
}
// order is not ready if we just changed size...
document.getElementById('buttons').style.display='none';
}
// function to handle asynchronus call
function loadColors() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) {
document.getElementById('colors').innerHTML=xmlhttp.responseText;
if (xmlhttp.responseText.indexOf('disabled')<=0) {
document.getElementById('color').focus();
}
}
}
}
function selectedColor(pColor) {
document.getElementById('buttons').style.display='inline';
}
//-->
</script>
<style type="text/css">
<!--
#buttons {
display: none;
}
-->
</style>
</head>
<body>
<noscript>
<p>This page requires JavaScript to function.</p>
</noscript>
<p>Select the shoe style, your size, and then the shoe color:</p>
<form method="get" action="shoeOrderForm.asp">
<p><!--#include file="shoeOrderFormGetStyles.asp"-->
<span id="sizes"><!--#include file="shoeOrderFormGetAvailableSizes.asp"--></span>
<span id="colors"><!--#include file="shoeOrderFormGetAvailableColors.asp"--></span>
<span id="buttons"><input type="submit" value="Add To Cart"></span>
</form>
</body>
</html>
<%
' Using paramSQL.asp as is an include to the main page
Dim styleID, color, query, out
' Prevent SQL injection: filter styleID
styleID = getField("style,rXnumeric,get")
If styleID & "x" = "x" Then
styleID=-1
End If
query = "SELECT id, style FROM shoeStyles ORDER BY style;"
openCommand Application("articles"),"getStyles 1"
getRS db_rs, query, "getStyles 2"
out = "<select name=""style"" id=""style"" size=""1"" onchange=""getAvailableSizes(this[this.selectedIndex].value);"">"
out = out & "<option value="""">Select style...</option>"
While Not db_rs.Eof
If CInt(db_rs("id"))=CInt(styleID) Then
out = out & "<option selected value="""& db_rs("id") &""">"& db_rs("style") &"</option>"
Else
out = out & "<option value="""& db_rs("id") &""">"& db_rs("style") &"</option>"
End If
db_rs.Movenext
Wend
out = out & "</select>"
closeCommand
closeRS
Response.Write out
%>
<!--METADATA TYPE="typelib" uuid="00000205-0000-0010-8000-00AA006D2EA4" -->
<%
On Error Resume Next
Dim gas_styleId, gas_size, gas_query, gas_cmd, gas_conn, gas_rs, gas_out
' SQL injection risk...limit input to known good values
gas_styleId = Request.QueryString("style")
If gas_styleId & "x" <> "x" Then
If NOT(CInt(gas_styleId) > 0 AND CInt(gas_styleId) < 7) Then
Response.Write "Bad Style"
Response.End
End If
End If
gas_size = Request.QueryString("size")
If InStr("7,7.5,8,8.5,9,9.5,10,10.5,11,11.5,12,12.5,13,14,15",gas_size) < 1 Then
Response.Write "Bad Size"
Response.End
End If
If (gas_styleId & "x" <> "x") Then
gas_query = "SELECT [size] FROM shoeInventory WHERE (id=@id) AND ([quantity]>0) GROUP BY [size] ORDER BY CDbl([size]);"
Set gas_cmd = Server.CreateObject("ADODB.Command")
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
Set gas_conn = Server.CreateObject("ADODB.Connection")
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
Set gas_rs = Server.CreateObject("ADODB.Recordset")
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
gas_conn.Open Application("articles")
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
Set gas_cmd.ActiveConnection = gas_conn
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
Set param = gas_cmd.CreateParameter("@id",adVarChar,adParamInput,CLng(50),gas_styleId)
gas_cmd.Parameters.Append param
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
gas_cmd.CommandText = gas_query
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
gas_rs.Open gas_cmd,,adOpenStatic
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
' if we have a response, build a select otherwise indicate out of stock
If NOT (gas_rs.Bof AND gas_rs.Eof) Then
gas_out = "<select name=""size"" id=""size"" size=""1"" onchange=""getAvailableColors(this[this.selectedIndex].value);"">"
If gas_size & "x" = "x" Then
gas_out = gas_out & "<option selected value="""">Select size...</option>"
End If
While Not gas_rs.Eof
If gas_rs("size") = gas_size Then
gas_out = gas_out & "<option selected value="""& gas_rs("size") &""">"& gas_rs("size") &"</option>"
Else
gas_out = gas_out & "<option value="""& gas_rs("size") &""">"& gas_rs("size") &"</option>"
End If
gas_rs.Movenext
Wend
gas_out = gas_out & "</select>"
Else
gas_out = "<input id=""size"" type=""text"" size=""10"" value=""Out of Stock"" disabled>"
End If
If IsObject(gas_rs) Then
gas_rs.Close
Set gas_rs = Nothing
End If
If IsObject(gas_conn) Then
gas_conn.Close
Set gas_conn = Nothing
End If
Set param = Nothing
if IsObject(db_cmd) then
Set db_cmd = nothing
End If
Else
gas_out = "<select name=""size"" id=""size"" size=""1"" disabled><option>Choose Style</option></select>"
End If
Response.Write gas_out
On Error Goto 0
%>
<!--METADATA TYPE="typelib" uuid="00000205-0000-0010-8000-00AA006D2EA4" -->
<%
On Error Resume Next
Dim gac_styleId, gac_size, gac_color, gac_cmd, gac_conn, gac_rs, gac_query, gac_out
' SQL injection risk - need to filter
gac_styleId = Request.QueryString("style")
If gac_styleId & "x" <> "x" Then
If NOT(CInt(gac_styleId) > 0 AND CInt(gac_styleId) < 7) Then
Response.Write "Bad Style"
Response.End
End If
End If
gac_size = Request.QueryString("size")
If gac_size & "x" <> "x" Then
If InStr("7,7.5,8,8.5,9,9.5,10,10.5,11,11.5,12,12.5,13,14,15",gac_size) < 1 Then
Response.Write "Bad Size"
Response.End
End If
End If
gac_color = Request.QueryString("color")
If gac_color & "x" <> "x" Then
If InStr("Black,Brown,Tan",gac_color) < 1 Then
Response.Write "Bad Color"
Response.End
End If
End If
If (gac_styleId & "x" <> "x") AND (gac_size & "x" <> "x") Then
gac_query = "SELECT color FROM shoeInventory WHERE ([size]=@size) AND (id=@id) AND (quantity>0) ORDER BY color;"
Set gac_cmd = Server.CreateObject("ADODB.Command")
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
Set gac_conn = Server.CreateObject("ADODB.Connection")
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
Set gac_rs = Server.CreateObject("ADODB.Recordset")
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
gac_conn.Open Application("articles")
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
Set gac_cmd.ActiveConnection = gac_conn
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
Set param = gac_cmd.CreateParameter("@size",adInteger,adParamInput,CLng(4),CDbl(gac_size))
gac_cmd.Parameters.Append param
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
Set param = gac_cmd.CreateParameter("@id",adVarChar,adParamInput,CLng(50),gac_styleId)
gac_cmd.Parameters.Append param
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
gac_cmd.CommandText = gac_query
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
gac_rs.Open gac_cmd,,adOpenStatic
If Err Then
Response.Write Err.Number & " " & Err.Description & " " & Err.Source
Response.End
End If
If NOT(gac_rs.Eof AND gac_rs.Bof) Then
gac_out = "<select name=""color"" id=""color"" size=""1"" onchange=""selectedColor(this[this.selectedIndex].value);"">"
If gac_color&"x"="x" Then
gac_out = gac_out & "<option value="""">Select color...</option>"
End If
While Not gac_rs.Eof
If gac_rs("color")=gac_color Then
gac_out = gac_out & "<option selected value="""& gac_rs("color") &""">"& gac_rs("color") &"</option>"
Else
gac_out = gac_out & "<option value="""& gac_rs("color") &""">"& gac_rs("color") &"</option>"
End If
gac_rs.Movenext
Wend
gac_out = gac_out & "</select>"
Else
gac_out = "<input id=""color"" type=""text"" value=""Out of Stock"" readonly>"
End If
If IsObject(gac_rs) Then
gac_rs.Close
Set gac_rs = Nothing
End If
If IsObject(gac_conn) Then
gac_conn.Close
Set gac_conn = Nothing
End If
Set param = Nothing
if IsObject(db_cmd) then
Set db_cmd = nothing
End If
Else
gac_out = "<select name=""color"" id=""color"" size=""1"" disabled><option>Choose size</option></select>"
End If
Response.Write gac_out
%>
Date Validation Using JavaScript .
Cross-Browser Clipboard Copy .
Loading Images With Remote Scripting .
Why JavaScript In Hyperlinks Is Bad .
Change The Submit Button To Show Waiting For AJAX Response .
European Date Validation Using JavaScript .
Database Results To Client Side Array .
Reading Files With JavaScript .
AJAX For Plain Text And HTML .
