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


The information in this article applies to:

  • Microsoft Internet Explorer (Programming) 5.5 SP2
  • Microsoft Internet Explorer (Programming) version 6.0
This article was previously published under Q319741

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.

CAUSE

This is a regression from Internet Explorer 5.5.

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.

STATUS

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

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

  1. 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>
  2. Save the file as Frameset.html.
  3. 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>
  4. Save the file as TestFrame.html.
  5. Place both .html files in the same directory.
  6. Locate the Frameset.html file.
  7. Click in the text box and type some text.
  8. 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.

REFERENCES

For more information, visit the following MSDN Web sites:

SELECT Element | select Object
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/select.asp

onbeforedeactivate Event
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforedeactivate.asp

onchange Event
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onchange.asp

Modification Type:MajorLast Reviewed:1/6/2004
Keywords:kbbug kbpending KB319741
©2003 Microsoft Corporation. All rights reserved.