|
|
Multiple Dynamic Form Select
This is a script that will help you create a database driven secondary html select based off
the selection of a database driven primary html select. This script uses a combination of ASP,
JavaScript and AJAX to display the options.
In the past, before I knew about AJAX, I wrote and used similar scripts that
use a database to write all the possibilities into
JavaScript variables for display in your form. If you have a database that their maybe 20 primary options,
10 secondary options for each of those and then maybe 5 more options based on those secondary options,
that could end up with as many as 1000 different JavaScript variables, plus it is taxing on
the server to write all those options to the screen, thus appearing to be slow to the visitor.
One advantage huge advantage about this script is that you will only run a query when you need to
run a query and only write to the screen when you need to, thus saving on bandwidth and time.
With this script there is also no waiting for the page to refresh or reload while getting your next
list of options.
In our example below, you will need to create two files.
The first one will be the page that your form is on, for the sake of our example we will name it "TheForm.asp".
The second file will be named "GetOptions.asp".
In this example, when a visitor to the page uses the form and selects
a value from the FirstField dropdown, a call is made to the
JavaScript function GetOptions. The GetOptions function makes a
XMLHTTP request with the value of FirstField to GetOptions.asp.
The GetOptions.asp file runs a query based on the FirstField selection
and writes the next selection. The XMLHTTP request in the GetOptions
JavaScript function grabs the content written by GetOptions.asp and
writes that to SecondFieldDiv div.
Here is the ASP code for TheForm.asp:
<html>
<head>
<script language="JavaScript">
function GetOptions()
{
var TheValue = document.getElementById("FirstField").value;
document.getElementById("SecondFieldDiv").innerHTML = "<marquee>Building List</marquee>";
var OptRequest = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
OptRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
OptRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
OptRequest = false;
}
}
}
var TheUrl = "GetOptions.asp?FirstField=" + TheValue;
OptRequest.open("GET", TheUrl, true);
OptRequest.onreadystatechange = function()
{
if (OptRequest.readyState == 4)
{
if (OptRequest.status == 200)
{
document.getElementById("SecondFieldDiv").innerHTML = OptRequest.responseText;
}
}
};
OptRequest.send(null);
}
</script>
<title>Multiple Dynamic Form Select</title>
</head>
<body>
<form name="PostStuff">
<div id="FirstFieldDiv">
Select an option:
<select name="FirstField" onchange="JavaScript:GetOptions();>
<%
Set objrs = Server.CreateObject ("ADODB.RecordSet")
SqlStr = "SELECT FirstField " & _
"FROM TheTable " & _
"GROUP BY FirstField " & _
"ORDER BY FirstField ASC "
objrs.Open SqlStr, ConnectionStr, adOpenStatic, adLockOptimistic,adCmdText
While Not Objrs.EOF
Response.Write "<option value=" & chr(34) & Objrs("FirstField") & chr(34) & ">" & _
objrs("FirstField") & _
"</option>"
Objrs.MoveNext
Wend
objrs.Close
Set objrs = Nothing
%>
</select>
</div>
<div id="SecondFieldDiv">
</div>
</form>
</body>
</html>
Here is the ASP code for GetOptions.asp:
<select name="SecondField">
<%
Set objrs = Server.CreateObject ("ADODB.RecordSet")
SqlStr = "SELECT SecondField " & _
"FROM TheTable " & _
"GROUP BY SecondField " & _
"ORDER BY SecondField ASC "
objrs.Open SqlStr, ConnectionStr, adOpenStatic, adLockOptimistic,adCmdText
While Not Objrs.EOF
Response.Write "<option value=" & chr(34) & Objrs("SecondField") & chr(34) & ">" & _
objrs("SecondField") & _
"</option>"
Objrs.MoveNext
Wend
objrs.Close
Set objrs = Nothing
%>
</select>