To read the article online, visit

Coding the OnChange Event

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:

     <FRAME NAME="frmListBox1" SRC="ListBox1.asp">
     <FRAME NAME="frmListBox2" SRC="ListBox2.asp?StateValue=IL">

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:

      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>

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 Case strState
       Case "IL": %>
      <% Case "MO": %>
          <OPTION>Kansas City</OPTION>
          <OPTION>St. Louis</OPTION>
      <% Case "HA": %>
      <% Case "NY": %>
          <OPTION>New York</OPTION>
    <% End 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.

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!

Article Information
Article Title: Coding the OnChange Event
Article Author: Scott Mitchell
Published Date: Tuesday, October 13, 1998
Article URL:

Copyright 2019 QuinStreet Inc. All Rights Reserved.
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers