IE6 problem with onchange handler on dynamically created <select>

Bart van Deenen · Feb 11, 2005

Hi all

I have a script where I dynamically create multiple inputs and selects
from a script. The inputs and selects must have an associated onchange
handler.
I have the script working fine on Firefox, Safari and Konqueror, but the
onchange event just doesn't fire on IE6.
Firefox's javascript console shows no errors, and the IE script debugger
shows nothing. onchange is not triggered.

Can anyone provide some information on how to solve this issue? I have
provided a complete html page that shows the problem below.

Thanks

Bart
========================================================
<html>
<head>
<title>onChange problems</title>
</head>
<body>
<script>

function onchange_handler(el)
{
alert(el+", value="+ el.options[el.selectedIndex].value );
}

function new_select()
{
f=new Array( "a", "b", "c" );

var select =document.createElement("select");

var attr;
el=document.getElementById("here");

var parent=el.parentNode;
parent.insertBefore(select,el);

attr = document.createAttribute("onchange");
attr.nodeValue='onchange_handler(this)';
select.setAttributeNode(attr);

for(i in f){
select.options = new Option(f);
}
}

</script>

<p>Click this to create <button onclick='new_select()' >new
select</button>.
Then select something to check onchange handler.
<p id='here' />
</body>
</html>

RobB · Feb 11, 2005

Bart said:
Hi all

I have a script where I dynamically create multiple inputs and selects
from a script. The inputs and selects must have an associated onchange
handler.
I have the script working fine on Firefox, Safari and Konqueror, but the
onchange event just doesn't fire on IE6.
Firefox's javascript console shows no errors, and the IE script debugger
shows nothing. onchange is not triggered.

Can anyone provide some information on how to solve this issue? I have
provided a complete html page that shows the problem below.

Thanks

Bart
========================================================
<html>
<head>
<title>onChange problems</title>
</head>
<body>
<script>

function onchange_handler(el)
{
alert(el+", value="+ el.options[el.selectedIndex].value );
}

function new_select()
{
f=new Array( "a", "b", "c" );

var select =document.createElement("select");

var attr;
el=document.getElementById("here");

var parent=el.parentNode;
parent.insertBefore(select,el);

attr = document.createAttribute("onchange");
attr.nodeValue='onchange_handler(this)';
select.setAttributeNode(attr);

for(i in f){
select.options = new Option(f);
}
}

</script>

<p>Click this to create <button onclick='new_select()' >new
select</button>.
Then select something to check onchange handler.
<p id='here' />
</body>
</html>

IE has problems with registering event handlers by setting them as
attribute nodes. Not sure why (someone around here probably is) but as
it also afaik isn't supported pre-v.6, and, as there have been problems
with Safari (among others) with it, it's probably safest for now to
just assign the handler directly:

select.onchange = function(){onchange_handler(this);}

A wrapper seems to help IE:

<html>
<head>
<title>onChange problems</title>
</head>
<body>
<script>

function onchange_handler(el)
{
alert(el+", value="+ el.options[el.selectedIndex].value );
}

function new_select()
{
f=new Array( "a", "b", "c" );
var select =document.createElement("select");
var attr;
el=document.getElementById("here");
var parent=el.parentNode;
parent.insertBefore(select,el);
attr = document.createAttribute("onchange");
attr.nodeValue=new Function('onchange_handler(this)');
select.setAttributeNode(attr);
for(i in f){
select.options = new Option(f,f);
}
}

</script>
<p>Click this to create <button onclick='new_select()' >new
select</button>.
Then select something to check onchange handler.
<p id='here' />
</body>
</html>

....but not Moz.

Bart van Deenen · Feb 17, 2005

Paul R said:
parent.innerHTML +=
"<select id='s" + (num++) +
"' onchange='onchange_handler(this)'/>";

select = document.getElementById("s" + (num - 1));

It's not elegant, but it works. Thanks

This is my first deep foray into Javascript and DOM, and I must say I've
never seen any software that is so buggy as this, especially on the IE
side, but Mozilla is not perfect either.

Thanks

Bart

Bart van Deenen · Feb 17, 2005

RobB said:
attr.nodeValue=new Function('onchange_handler(this)');

Works like a charm, in IE

thanks

Bart

Multi select options in a menu	1	Oct 30, 2022
Issue with textbox script?	0	Sep 5, 2022
Dynamically created select not firing events in IE, works in other browses	12	Jul 22, 2007
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Need help with code on website (noob)	2	Jul 18, 2022
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Help on onchange event for refreshing the page	1	Nov 19, 2008
[IE] Toggle checkbox state - onclick vs. onchange	0	Apr 4, 2008

IE6 problem with onchange handler on dynamically created <select>

Bart van Deenen

RobB

Bart van Deenen

Bart van Deenen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads