The following tests simulate the use of AJAX to dynamically populate one field based on the value of another. (For sake of demonstration, a JavaScript timeout is used to simulate the delay due to an asynchronous AJAX call.)
In the form below, enter an (Illinois) zip code in the ZIP textbox. When the fifth digit is entered, the script will look up the corresponding county and enter it in the County textbox. While waiting for the county value to be returned, the County field is set to readonly, and a "Please wait..." message is displayed. When the value returns, the readonly value is reset, and, if the County field has focus, its select() method is called to prompt a screen reader to read the new value (although this currently only works in Internet Explorer).
In the form below, select a county from the County drop-down list and then move focus to the next field using the keyboard (tab key) or mouse. When the focus leaves the County drop-down list (onblur), the script will look up the corresponding ZIP codes and use them to populate the ZIP drop-down list. While waiting for the ZIP codes to be returned, the options in the ZIP drop-down list are replaced with a single option with the text"Please wait...". When the values are returned, the new options are added to the list, and, if the ZIP field had focus, its focus() method is called to prompt a screen reader to read the new value (again, currently only in IE).
In both examples, it was necessary to manage the readonly, focus, and/or select states of the fields that were being updated. These techniques were necessary to:
Achieving the latter required the use of Internet Explorer's "activeElement" property, which doesn't seem to have a counterpart in Mozilla.