By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,461 Members | 1,046 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,461 IT Pros & Developers. It's quick & easy.

IE6 problem with onchange handler on dynamically created <select>

P: n/a
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[i] = new Option(f[i]);
}
}

</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>
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies

P: n/a
Bart van Deenen wrote:
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.

[...]

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[i] = new Option(f[i]);
}
}

</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>


I don't see anything obviously suspect: if you paste your resulting HTML
into a fresh page, IE dutifully fires the event.

I can offer the following workaround:

var num = 0;
....

if(isW3C)
{
....
}
else if(isIE)
{
parent.innerHTML +=
"<select id='s" + (num++) +
"' onchange='onchange_handler(this)'/>";

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

for(i in f){...

etc.
Jul 23 '05 #2

P: n/a
Bart van Deenen wrote:
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[i] = new Option(f[i]);
}
}

</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[i] = new Option(f[i],f[i]);
}
}

</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.

Jul 23 '05 #3

P: n/a
Paul R <no*********@email.address> wrote:
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
Jul 23 '05 #4

P: n/a
RobB <fe******@hotmail.com> wrote:
attr.nodeValue=new Function('onchange_handler(this)');

Works like a charm, in IE

thanks

Bart
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.