SELECT Onchange 'delayed' in Firefox on keypress?

[Jan Doggen]

Hello all,

I have a SELECT like this (the 'alert()s are temporary):
<FORM method="POST"
action="/scripts/runisa.dll?OVB2.132964:PGSPLITVACAFMELDEN:10951442 87.9159"
id="hulpform" name="hulpform">
<select name="varVervuld" id="varVervuld"
onChange="alert('Onchange');Vervuld(this.options[this.selectedIndex]);">
<option value="0" selected="selected">&nbsp;</option>
<option value=JA>Ja</option>
<option value=NEE>Nee</option>
</select>
</FORM>

with procedure VerVuld() rewriting the contents of a DIV with a second FORM
(see below):

function Vervuld(optie)
{
var x = optie.value;
var BL = document.getElementById('bottomlayer');
alert('Vervuld('+x+')');
if (x == 'JA')
{
BL.innerHTML = '<FORM method="POST"
action="/scripts/runisa.dll?OVB2.132964:PGSPLITVACAFMELDEN:10951442 87.4331"
id="form1" name="form1">'
+ 'Op welke wijze is de vacature vervuld? Kies één van de volgende
mogelijkheden:'
+ '<UL><LI>www.onderwijsvacaturebank.nl</LI><LI>Intermediaire organisatie
(bv. CWI/Uitzendbureau)</LI><LI>www.werk.nl of andere vacaturebank op
internet</LI><LI>Advertentie in krant</LI><LI>Open
sollicitatie</LI><LI>Intern</LI><LI>Via eigen netwerk/persoonlijke
contacten</LI><LI>Anders, nl</LI></UL>'
+ '<table><tr><td><strong>Vervuld via</strong></td><td>'
+ '<select size="1" name="litVervuld" id="litVervuld">'
+ '<OPTION VALUE="0" SELECTED>&nbsp;<OPTION
VALUE="1">www.onderwijsvacaturebank.nl<OPTION VALUE="4">Intermediaire
organisatie (bv. CWI/Uitzendbureau)<OPTION VALUE="6">www.werk.nl of andere
vacaturebank op internet<OPTION VALUE="2">Advertentie in krant<OPTION
VALUE="7">Open sollicitatie<OPTION VALUE="3">Intern<OPTION VALUE="8">Via
eigen netwerk/persoonlijke contacten<OPTION VALUE="5">Anders, nl</select*'
+ '</td></tr><tr><td valign=top><strong>Ruimte voor
toelichting</strong></td><td><textarea name="txtVervuldToelichting" rows="4"
cols="40"></textarea></td></tr></table>'
+ '<br />Door wie is de vacature vervuld? Kies één van de volgende
mogelijkheden:'
+ '<UL><LI>Werkzaam binnen onderwijs</LI><LI>Werkzaam buiten
onderwijs</LI><LI>Pas
afgestudeerde</LI><LI>Wachtgelder</LI><LI>Herintreder</LI><LI>Werkloze (niet
zijnde wachtgelder)</LI><LI>Anders</LI></UL>'
+ '<table><tr><td><strong>Vervuld door</strong></td><td>'
+ '<select size="1" name="litPersonage" id="litPersonage">'
+ '<OPTION VALUE="0" SELECTED>&nbsp;<OPTION VALUE="8">Werkzaam binnen
onderwijs<OPTION VALUE="9">Werkzaam buiten onderwijs<OPTION VALUE="10">Pas
afgestudeerde<OPTION VALUE="11">Wachtgelder<OPTION
VALUE="12">Herintreder<OPTION VALUE="13">Werkloze (niet zijnde
wachtgelder)<OPTION VALUE="15">Anders</select*'
+ '</td></tr><tr><td valign=top><strong>Ruimte voor
toelichting</strong></td><td>'
+ '<textarea name="txtVervuldDoorToelichting"
id="txtVervuldDoorToelichting" rows="4"
cols="40"></textarea></td></tr></table>'
+ '<input type="hidden" id="selKeuze" name="selKeuze" value=' + x + '><p>*
= dit is een verplicht in te vullen veld</p></FORM>';
}
else if (x == 'NEE')
{
BL.innerHTML = '<FORM method="POST"
action="/scripts/runisa.dll?OVB2.132964:PGSPLITVACAFMELDEN:10951442 87.9653"
id="form1" name="form1">'
+ 'Waarom is de vacature niet vervuld?<br />Kies één van de volgende
mogelijkheden:'
+ '<UL><LI>Vacature is vervallen</LI><LI>Foutieve opvoer of wijziging in
vacaturegegevens</LI><LI>Anders, nl</LI></UL>'
+ '<table><tr><td><strong>Niet vervuld</strong></td><td>'
+ '<select size="1" name="litNietVervuld" id="litNietVervuld">'
+ '<OPTION VALUE="0" SELECTED>&nbsp;<OPTION VALUE="1">Vacature is
vervallen<OPTION VALUE="3">Foutieve opvoer of wijziging in
vacaturegegevens<OPTION VALUE="2">Anders, nl</select*'
+ '</td></tr><tr><td valign=top><strong>Ruimte voor
toelichting</strong></td><td>'
+ '<textarea name="txtNietVervuldToelichting"
id="txtNietVervuldToelichting" rows="4"
cols="40"></textarea></td></tr></table>'
+ '<input type="hidden" id="selKeuze" name="selKeuze" value=' + x + '><p>*
= dit is een verplicht in te vullen veld</p></FORM>';
}
else
{
BL.innerHTML = '<FORM method="POST"
action="/scripts/runisa.dll?OVB2.132964:PGSPLITVACAFMELDEN:10951442 87.1025"
id="form1" name="form1"><input type="hidden" id=selKeuze name=selKeuze
value=' + x + '></FORM>';
}
alert('Vervuld ends');
return true;
}

This is the DIV that gets rewritten:

<div id="bottomlayer" name="bottomlayer">
<FORM method="POST"
action="/scripts/runisa.dll?OVB2.132964:PGSPLITVACAFMELDEN:10951442 87.6068"
id="form1" name="form1">
<input type="hidden" id="selKeuze" name="selKeuze">
</FORM>
</div>

Everything works fine when I use the mouse for selecting values in the
varVervuld SELECT.
However, when I press J or N, Vervuld() does *not* get called (the alert in
the onchange doesn't even fire).
The contents of VarVervuld change from Ja to Nee 2 or 3 times, then it seems
'stuck' (and DIV bottomlayer never gets updated).
If I then e.g. tab away from VarVervuld or alt-tab away to another Windows
app, the OnChange gets triggered and the screen updates.
In IE it all works as expected.

I tried e.g. explicitly setting focus back to varVervuld right before the
return true:
var Elem=document.getElementById("varVervuld");
setTimeout("Elem.focus();",0);
but that makes no difference.

Any ideas?
TIA
Jan

[RobG]

Jan Doggen wrote:

Hello all,

I have a SELECT like this (the 'alert()s are temporary):
<FORM method="POST"
action="/scripts/runisa.dll?OVB2.132964:PGSPLITVACAFMELDEN:10951442 87.9159"
id="hulpform" name="hulpform">
<select name="varVervuld" id="varVervuld"
onChange="alert('Onchange');Vervuld(this.options[this.selectedIndex]);">
<option value="0" selected="selected">&nbsp;</option>
<option value=JA>Ja</option>
<option value=NEE>Nee</option>
</select>
</FORM>

[...]

Do not allow posted code to auto-wrap, I couldn't be bothered to remove
all the errors caused by it. Manually wrap it at about 70 characters.

The best idea is to post a minimal example that demonstrates the issue
and that works when copied to an empty page.

Everything works fine when I use the mouse for selecting values in the
varVervuld SELECT.
However, when I press J or N, Vervuld() does *not* get called (the alert in
the onchange doesn't even fire).
The contents of VarVervuld change from Ja to Nee 2 or 3 times, then it seems
'stuck' (and DIV bottomlayer never gets updated).
If I then e.g. tab away from VarVervuld or alt-tab away to another Windows
app, the OnChange gets triggered and the screen updates.
In IE it all works as expected.

[...]

Any ideas?

The onchange event pretty much epitomises the issue of inconsistent
implementation of standards by browsers. In this case, Firefox is
"correct" according to the specification in that it fires when the
control loses focus, IE fires the event too early. With radio buttons,
the situtation is reversed. Your opinion on which is the more
desirable behaviour (as opposed to the more correct) depends on what
you are trying to do when you discover the inconsistency.

The only help I can offer at this stage is to fire the handler from
some other event, or combination of events.
--
Rob