Microsoft KB Archive/319741

= BUG: OnChange Event of  Fires Incorrectly in a FRAME When Refreshed Programmatically =

Article ID: 319741

Article Last Modified on 11/29/2007

-

APPLIES TO


 * Microsoft Internet Explorer (Programming) 5.5 SP2
 * Microsoft Internet Explorer 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 &quot;Symptoms&quot; 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:   Test for Q319741 

  </FRAMESET>

</HTML> </li> <li>Save the file as Frameset.html.</li> <li> Create a new Hypertext Markup Language (HTML) file with the following code. <HTML> </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=&quot;selectOnchange;&quot;> <OPTION value=-1>Select</OPTION> <OPTION value=&quot;option1&quot;>option1</OPTION> <OPTION value=&quot;option2&quot;>option2</OPTION> <OPTION value=&quot;option3&quot;>option3</OPTION> </SELECT> <BR><BR> Please type text inside this textbox: <input type=text onchange=&quot;inputOnchange;&quot;> </BODY>

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

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

<div class="references_section">