IE6 problem with onchange handler on dynamically created <select>

Discussion in 'Javascript' started by Bart van Deenen, Feb 11, 2005.

  1. 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>
     
    Bart van Deenen, Feb 11, 2005
    #1
    1. Advertising

  2. Bart van Deenen

    RobB Guest

    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 = 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.
     
    RobB, Feb 11, 2005
    #2
    1. Advertising

  3. Paul R <> 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
     
    Bart van Deenen, Feb 17, 2005
    #3
  4. RobB <> wrote:

    > attr.nodeValue=new Function('onchange_handler(this)');

    Works like a charm, in IE

    thanks

    Bart
     
    Bart van Deenen, Feb 17, 2005
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. msimmons
    Replies:
    0
    Views:
    497
    msimmons
    Jul 16, 2009
  2. Nicholas Couch

    IE6 won't hide dynamically created span elements

    Nicholas Couch, Sep 17, 2004, in forum: Javascript
    Replies:
    20
    Views:
    227
    Thomas 'PointedEars' Lahn
    Sep 26, 2004
  3. yawnmoth

    onchange event handler and select tags

    yawnmoth, Dec 11, 2007, in forum: Javascript
    Replies:
    5
    Views:
    188
    Thomas 'PointedEars' Lahn
    Dec 12, 2007
  4. HugeBob

    Dynamically Assigning OnChange Handler

    HugeBob, Jun 3, 2008, in forum: Javascript
    Replies:
    2
    Views:
    136
    HugeBob
    Jun 3, 2008
  5. andypb123
    Replies:
    14
    Views:
    288
    David Mark
    Mar 21, 2011
Loading...

Share This Page