Introduction:
The OnChange even is a JavaScript/VBScript event that is fired whenever your INPUT's are
altered by the user. For a text box, the OnChange event is fired when a user types a new
keystroke. The onchange event is fired for a SELECT list-box when a new list item
is chosen. In this article I will discuss how to write a seemingly dynamic pair of list-
boxes. By this I mean that when one listboxes OnChange event is fired, the second list-box
will refresh itself (kind of), populating itself with new data.
Let the Magic Begin:
To do this, we will need to use frames. Ugh; I know, but this allows us to not have to have
the entire page refreshed, and the frames can be constructed so the user cannot even tell
that frames are being used. It will appear as though the list-box is dynamically reloaded
on the client's side. Let's look at some simple code to create two frames:
<FRAMESET ROWS="50%,*" BORDER="0" FRAMEBORDER="0" SCROLLING="NO" RESIZABLE="NO">
<FRAME NAME="frmListBox1" SRC="ListBox1.asp">
<FRAME NAME="frmListBox2" SRC="ListBox2.asp?StateValue=IL">
</FRAMESET>
This will create two frames, which will load two ASP files, each containing a listbox. In the top frame (
ListBox1.asp), we will have the list-box whose change-of-value
will dynamically change the bottom frame's value. Let's look at the HTML for ListBox1.asp:
<FORM>
Choose a state:
<SELECT NAME="selState" SIZE="1" ONCHANGE="HandleChange();">
<OPTION VALUE="IL">Illinois</OPTION>
<OPTION VALUE="MO">Missouri</OPTION>
<OPTION VALUE="HA">Hawaii</OPTION>
<OPTION VALUE="NY">New York</OPTION>
</SELECT>
</FORM>
This will create a listbox with four element's. When the OnChange event is fired (that is, when the user alters the current list-box selection), the JavaScript function HandleChange() will be run. Let's examine the code for that function:
function HandleChange() {
parent.frmListBox2.document.location.href="ListBox2.asp?StateValue=" + document.forms[0].selState.value;
}
So, when the list-box's value is changed, the bottom form is reloaded, passing down the new list-box value. Now, let's look at the code for
ListBox2.asp.
<%
Dim strState
strState = Request.QueryString("StateValue")
if strState = "" then strState = "IL"
%>
. . .
<SELECT SIZE="1">
<%
Select Case strState
Case "IL": %>
<OPTION>Chicago</OPTION>
<OPTION>Springfield</OPTION>
<OPTION>Lombard</OPTION>
<OPTION>Aurora</OPTION>
<%
Case "MO": %>
<OPTION>Rolla</OPTION>
<OPTION>Kansas City</OPTION>
<OPTION>St. Louis</OPTION>
<%
Case "HA": %>
<OPTION>Honolulu</OPTION>
<OPTION>Oahu</OPTION>
<%
Case "NY": %>
<OPTION>New York</OPTION>
<OPTION>Albany</OPTION>
<OPTION>Ithica</OPTION>
<% End Select %>
</SELECT>
Hopefully you can tell from the above code what will happen. Depending upon the value passed in through the querystring, a varying set of OPTION values will be displayed for the bottom list-box. So, if the user selects Hawaii from the top list-box, the bottom frame will be reloaded to show the Hawaii cities. This code displays how we can mimick dynamic data bound list-boxes without having to make a round trip to the server.
Conclusion
In this article I discussed the OnChange event, and how one can code JavaScript functions to
handle these events and respond to them. In the example I gave above, the only real
"handling" we performed was to reload another frame, as to give the illusion that we have
a dynamic, data-bound listbox. The OnChange event exposes quite a bit of information to the
web programmer, and is a great event to code for!
Happy Programming!
