473,554 Members | 2,917 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE6 problem with onchange handler on dynamically created <select>

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>onChan ge problems</title>
</head>
<body>
<script>
function onchange_handle r(el)
{
alert(el+", value="+ el.options[el.selectedInde x].value );
}

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

var select =document.creat eElement("selec t");

var attr;
el=document.get ElementById("he re");

var parent=el.paren tNode;
parent.insertBe fore(select,el) ;

attr = document.create Attribute("onch ange");
attr.nodeValue= 'onchange_handl er(this)';
select.setAttri buteNode(attr);

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

</script>

<p>Click this to create <button onclick='new_se lect()' >new
select</button>.
Then select something to check onchange handler.
<p id='here' />
</body>
</html>
Jul 23 '05 #1
4 6103
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_handle r(el)
{
alert(el+", value="+ el.options[el.selectedInde x].value );
}

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

var select =document.creat eElement("selec t");

var attr;
el=document.get ElementById("he re");

var parent=el.paren tNode;
parent.insertBe fore(select,el) ;

attr = document.create Attribute("onch ange");
attr.nodeValue= 'onchange_handl er(this)';
select.setAttri buteNode(attr);

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

</script>

<p>Click this to create <button onclick='new_se lect()' >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.innerHTM L +=
"<select id='s" + (num++) +
"' onchange='oncha nge_handler(thi s)'/>";

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

for(i in f){...

etc.
Jul 23 '05 #2
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>onChan ge problems</title>
</head>
<body>
<script>
function onchange_handle r(el)
{
alert(el+", value="+ el.options[el.selectedInde x].value );
}

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

var select =document.creat eElement("selec t");

var attr;
el=document.get ElementById("he re");

var parent=el.paren tNode;
parent.insertBe fore(select,el) ;

attr = document.create Attribute("onch ange");
attr.nodeValue= 'onchange_handl er(this)';
select.setAttri buteNode(attr);

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

</script>

<p>Click this to create <button onclick='new_se lect()' >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(){onch ange_handler(th is);}

A wrapper seems to help IE:

<html>
<head>
<title>onChan ge problems</title>
</head>
<body>
<script>

function onchange_handle r(el)
{
alert(el+", value="+ el.options[el.selectedInde x].value );
}

function new_select()
{
f=new Array( "a", "b", "c" );
var select =document.creat eElement("selec t");
var attr;
el=document.get ElementById("he re");
var parent=el.paren tNode;
parent.insertBe fore(select,el) ;
attr = document.create Attribute("onch ange");
attr.nodeValue= new Function('oncha nge_handler(thi s)');
select.setAttri buteNode(attr);
for(i in f){
select.options[i] = new Option(f[i],f[i]);
}
}

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

....but not Moz.

Jul 23 '05 #3
Paul R <no*********@em ail.address> wrote:
parent.innerHTM L +=
"<select id='s" + (num++) +
"' onchange='oncha nge_handler(thi s)'/>";

select = document.getEle mentById("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
RobB <fe******@hotma il.com> wrote:
attr.nodeValue= new Function('oncha nge_handler(thi s)');

Works like a charm, in IE

thanks

Bart
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
1576
by: Dennis M. Marks | last post by:
I have a problem with the following code. It generates a <FORM><SELECT><OPTION> list. There is no problem in the generating. The problem is in the execution as follows. It works fine in Mac IE with and without the <FORM></FORM>. In Mac Netscape 6 the onChange does not activate if there is no <FORM></FORM>. When I put it in a form as...
1
2381
by: Ang Talunin | last post by:
Hey, I wondering if it's possible to retrieve all the <option>-fields from a <select> when posting a <form> to a php file Example: I've got a form like this: <form action = phpfile.php method=post > <select name= "name">
2
11719
by: Aaron C | last post by:
This is kindof a newbie question, so please bear with me... I need to pass the selected option of a <select> tag into a query string, so that the page is reloaded with the selected option already chosen. This will occur with the onclick() event hander, and the query string will be processed using a server-side technology. I'm just not sure...
6
2991
by: Omar | last post by:
Hi, In a JSP I have the next: .... codigo = "<select name='" + nombre + "'>\n<option selected value='default'>Escoge</option><option value='todos'>Todos</option>"; if (miRS != null) while (miRS.next()) {
5
8294
by: Brian Foley | last post by:
Hello, I am used to using the label tag with check boxes and radio buttons in html forms. This allows me to click on the text of the label to activate/deactivate the check box / button, rather than having to click on the (possibly small) box or button. I recently tried to assign a label to a select "drop down list", but found that when...
6
19589
by: joseph.lindley | last post by:
Forgive me for I am a bit of a web-dev novice - but I'm not doing too bad. I'm currently working with a bit of javascript to dynamically add <option>s into a select box. My code currently works fine in Internet Explorer, however in Firefox the dropdown only displays the first option in the list, and when clicked the other values aren't...
4
39325
by: Man-wai Chang | last post by:
-- iTech Consulting Co., Ltd. Expert of ePOS solutions Website: http://www.itech.com.hk (IE only) Tel: (852)2325 3883 Fax: (852)2325 8288
0
7499
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7780
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8013
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7531
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
6120
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5414
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3539
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3530
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1994
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.