BUG: OnChange Event of <SELECT> Fires Incorrectly in a FRAME When Refreshed Programmatically

View products that this article applies to.

Symptoms

If you have a FRAMESET object with a FRAME that contains a SELECT control and an INPUT TYPE=TEXT or TEXTAREA control, and the OnChange event of the TEXTAREA control reloads the page, the OnChange event of the SELECT may fire after the page reloads. This behavior may occur even if you do not select a new item from the SELECT control.

↑ Back to the top

Cause

This is a regression from Internet Explorer 5.5.

↑ Back to the top

Resolution

To work around this problem, you can use one of the following methods. The method you use depends on the usage of the elements in your application.

Disable the Select box before the page unloads.
If you must submit a form, check the document.readyState property in the OnChange event before you submit the form. You must check this value in the OnChange event before you submit the form because this bug may cause two submits to occur at the same time, one submit from the Select box and one submit from the text box.

↑ Back to the top

Status

Microsoft has confirmed that this is a bug in the Microsoft products that are listed at the beginning of this article.

↑ Back to the top

More information

The problem that is described in the "Symptoms" section of this article may also apply to other events of the SELECT element, such as the onbeforeactivate event. The problem occurs if an unload is triggered from an event of an object that fires when the event loses focus (OnChange event, onblur event).

Steps to Reproduce the Behavior

Use the following code to create a FRAMESET:

<HTML>
<HEAD>
<TITLE>Test for Q319741</TITLE>
</HEAD>

<FRAMESET ROWS="*">
      <FRAME SRC="testFrame.html" NAME=MAIN>
</FRAMESET>

</HTML>

Save the file as Frameset.html.

Create a new Hypertext Markup Language (HTML) file with the following code.

<HTML>
<HEAD></HEAD>
<SCRIPT>
function selectOnchange()
{
   // workaround 2
   // if (document.readyState == 'complete')
   alert('select is changed');
}

function inputOnchange()
{
   // workaround 1
   // select1.disabled=true;
   location.reload(true);
}
</SCRIPT>
<BODY>
<SELECT id=select1 onchange="selectOnchange();"> <!-- using onBeforeDeactivate will cause the problem too -->
   <OPTION value=-1>Select</OPTION>
   <OPTION value="option1">option1</OPTION>
   <OPTION value="option2">option2</OPTION>
   <OPTION value="option3">option3</OPTION>
</SELECT>
<BR><BR>
Please type text inside this textbox: <input type=text onchange="inputOnchange();"></input> <!-- using onBlur will cause the problem too -->
</BODY>

</HTML>

Save the file as TestFrame.html.
Place both .html files in the same directory.
Locate the Frameset.html file.
Click in the text box and type some text.
Click the arrow on the SELECT box. This causes the OnChange event in the text box to fire.

After you click the SELECT control, a Window.alert MessageBox appears even though the currently-selected OPTION in the SELECT control does not change.

↑ Back to the top