IE6 problem with onchange handler on dynamically created <select>

B

Bart van Deenen

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

RobB

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

Bart van Deenen

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top