dynamicaly creating radio button does not work in IE

Discussion in 'Javascript' started by sam, Mar 15, 2006.

  1. sam

    sam Guest

    Hi all,
    I am dynamically creating a table rows and inerting radio buttons which
    are also dynamically created. Everything works fine in Firefox as
    expected. But I am not able to select radio buttons in IE. It does not
    even throw any errors. I have searched over the net but could not find
    anyhelp. Hope some experts here could help me.
    Here is part my code that dynamically generates the radio buttons, I
    cannot paste the entire code as it is very huge.

    var n = 0;
    var row = table.insertRow(table.rows.length);
    var cell = row.insertCell(row.cells.length);

    cell = row.insertCell(row.cells.length);
    var radio = document.createElement('input');
    radio.setAttribute('type', 'radio');
    radio.setAttribute('name', 'test'+n);
    radio.setAttribute('value', 'test123');
    radio.setAttribute('onclick', "this.form['test"+n+"'].disabled =
    true;");
    cell.appendChild(radio);
    cell = row.insertCell(row.cells.length);

    Any help really aprreciated.

    thanks,
    Sam
    sam, Mar 15, 2006
    #1
    1. Advertising

  2. sam wrote :
    > Hi all,
    > I am dynamically creating a table rows and inerting radio buttons which
    > are also dynamically created. Everything works fine in Firefox as
    > expected. But I am not able to select radio buttons in IE.


    You mean check radio buttons.

    It does not
    > even throw any errors.


    When you seek help, it is always best to provide an url along with the
    message text of the javascript error being reported.

    > I have searched over the net but could not find
    > anyhelp. Hope some experts here could help me.
    > Here is part my code that dynamically generates the radio buttons, I
    > cannot paste the entire code as it is very huge.
    >
    > var n = 0;
    > var row = table.insertRow(table.rows.length);


    You may want to consider -1 instead of requiring the browser to
    calculate the table.rows.length. What you do though (using
    table.rows.length) is more self-explanatory, intuitive, helps code
    maintenance.

    var objTRow = table.insertRow(-1);
    "If index is -1 or equal to the number of rows, the new row is appended."
    http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903


    > var cell = row.insertCell(row.cells.length);


    var objTCell = row.insertCell(-1);

    "If index is -1 or equal to the number of cells, the new cell is appended."
    http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016

    >
    > cell = row.insertCell(row.cells.length);


    You have twice the same assignment here.

    > var radio = document.createElement('input');
    > radio.setAttribute('type', 'radio');


    MSIE 6 is DOM 1 (HTML interface) compliant but is not DOM 2 compliant.

    http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-6043025

    http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025

    Type was read-only in DOM 1; this was changed in DOM 2.

    > radio.setAttribute('name', 'test'+n);


    One other thing: you should prefer DOM 2 HTML interface methods instead
    of using setAttribute since setAttribute is less widely supported in
    browsers or is less buggy.

    > radio.setAttribute('value', 'test123');
    > radio.setAttribute('onclick', "this.form['test"+n+"'].disabled =
    > true;");


    This is likely not to succeed. Event attributes are not set that way.
    Instead:

    radio.onclick = new Function("evt", "this.form['test"+n+"'].disabled =
    true;")

    > cell.appendChild(radio);
    > cell = row.insertCell(row.cells.length);
    >
    > Any help really aprreciated.
    >
    > thanks,
    > Sam
    >


    Dynamically create dynamically radio buttons
    http://www.gtalbot.org/DHTMLSection/DynamicallyCreateRadioButtons.html

    Please read my copyright notice:
    http://www.gtalbot.org/Varia/CopyrightNotice.html

    MSIE 6 bug: Dynamically inserted radio button is not checkable
    http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/CheckableInsertedRadioButton.html

    which I have reported already to MSIE 7 dev. team.

    Gérard
    --
    remove blah to email me
    Gérard Talbot, Mar 15, 2006
    #2
    1. Advertising

  3. sam

    RobG Guest

    sam said on 15/03/2006 10:26 AM AEST:
    > Hi all,
    > I am dynamically creating a table rows and inerting radio buttons which
    > are also dynamically created. Everything works fine in Firefox as
    > expected. But I am not able to select radio buttons in IE. It does not


    You can have a radio button in the source HTML that is hidden (say set
    its display attribute to 'none') and then clone it whenever you want to
    add other.


    > even throw any errors. I have searched over the net but could not find
    > anyhelp. Hope some experts here could help me.
    > Here is part my code that dynamically generates the radio buttons, I
    > cannot paste the entire code as it is very huge.
    >
    > var n = 0;
    > var row = table.insertRow(table.rows.length);
    > var cell = row.insertCell(row.cells.length);
    >
    > cell = row.insertCell(row.cells.length);
    > var radio = document.createElement('input');


    Somewhere in your HTML source put:

    <input type="radio" id="baseRadioButton" style="display: none;">

    Then (with appropriate feature testing) clone it as required:

    var radio =
    document.getElementById('baseRadioButton').cloneNode(false);

    radio.style.display = '';


    > radio.setAttribute('type', 'radio');
    > radio.setAttribute('name', 'test'+n);
    > radio.setAttribute('value', 'test123');
    > radio.setAttribute('onclick', "this.form['test"+n+"'].disabled =
    > true;");


    And then (remember to change the ID):

    radio.id = 'test' + n;
    radio.name = 'test' + n;
    radio.value = 'test123';
    radio.onclick = new Function(
    'this.form["test' + n + '"].disabled = true;');


    > cell.appendChild(radio);
    > cell = row.insertCell(row.cells.length);
    >
    > Any help really aprreciated.
    >
    > thanks,
    > Sam
    >




    --
    Rob
    RobG, Mar 15, 2006
    #3
  4. sam

    Danny Guest

    For IE, do it by means of property, setAtrribute() is correct,
    however IE has issues with setAttribute() :/ , use instead,
    radio.type=..; radio.onclick=...;


    Danny
    Danny, Mar 15, 2006
    #4
  5. sam

    BootNic Guest

    > "sam" <> wrote:
    > news:....
    >
    > Hi all,
    > I am dynamically creating a table rows and inerting radio buttons
    > which are also dynamically created. Everything works fine in
    > Firefox as expected. But I am not able to select radio buttons in
    > IE. It does not even throw any errors. I have searched over the net
    > but could not find anyhelp. Hope some experts here could help me.
    > Here is part my code that dynamically generates the radio buttons, I
    > cannot paste the entire code as it is very huge.

    [snip]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content=
    "text/html; charset=windows-1252">
    <!--[if IE]>
    <script type="text/javascript">
    var IE=1;
    </script>
    <![endif]-->
    <script type="text/javascript">
    var n=0;
    function addRadio(){
    var i=0;
    while(i<5){
    if(typeof(IE)=='number'){
    j=document.createElement('<input name=" ">');
    }
    else {
    j=document.createElement('input');
    }
    j.name='willy';
    j.type='radio';
    j.value=++n;
    document.body.appendChild(j);
    label=document.createElement('label');
    j.id=label.htmlFor='willy'+n;
    label.appendChild(document.createTextNode('willy'+n));
    document.body.appendChild(label);
    document.body.appendChild(document.createElement('br'));
    i++;
    }
    }
    </script>
    <title></title>
    </head>
    <body>
    <p><button onclick="addRadio()">Add Radio button</button></p>
    </body>
    </html>

    --
    BootNic Wednesday, March 15, 2006 2:59 AM

    "I suppose they are vicious rascals, but it scarcely matters what
    they are. I'm after what they know."
    *Gibson-Sterling, The Difference Engine*
    BootNic, Mar 15, 2006
    #5
  6. sam

    sam Guest

    Thanks to one and all who responded .. All the answers really helped me
    inprove my code and now it works in IE as well..

    Thanks,
    Sam
    sam, Mar 16, 2006
    #6
    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. Bisser Milanov
    Replies:
    2
    Views:
    530
    Bisser Milanov
    Jun 26, 2003
  2. Hiten
    Replies:
    1
    Views:
    616
    Vidar Petursson
    May 26, 2004
  3. Marcus
    Replies:
    4
    Views:
    398
    Marcus
    Feb 22, 2012
  4. anand basha
    Replies:
    2
    Views:
    95
    Evertjan.
    Jan 18, 2006
  5. Replies:
    1
    Views:
    743
Loading...

Share This Page