Soren Winslow Soren Winslow
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>



               
© 1967 - 2024 Soren Winslow