Dynamically drawn radio buttons not working in MSIE

By 'not working' I mean that the checked state doesn't change when clicked.

This sample is working as expected in FireFox but not MSIE 6 or 7.
The Statically drawn ones work fine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>radio</title>
    <script type="text/javascript">
      this.onload = function(){
        var r  = document.createElement('INPUT');
        r.type = "radio";
        r.name = "choose";
        r.id   = "btn1";
        r.value = "one";
        document.getElementById("fs").appendChild(r);
        r.checked = false;
                                                                                                                                                                  
        var s = document.createElement('INPUT');
        s.type = "radio";
        s.name = "choose";
        s.id   = "btn2";
        s.value = "two";
        document.getElementById("fs").appendChild(s);
        s.checked = true;
      }
    </script>
  </head>
  <body>
    <form method="get" id="theForm" action="">
      <fieldset id="fs">
        <legend>dynamic</legend>
      </fieldset>
    </form>
    <form method="get" id="theForm2" action="">
      <fieldset id="fs2">
        <legend>static</legend>
        <input type="radio" name="choose" id="a1" checked="checked" />
        <input type="radio" name="choose" id="a2" checked="" />
      </fieldset>
    </form>
  </body>
</html>

Something about asking on a forum makes Google work better.
Here is the solution:
http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html

That's strange. I was only able to verify its broke in IE7. I'd be lying if I said I was surprised though. :roll: Sorry, no solution from me at this time.

Originally posted by Ben Souther:
Something about asking on a forum makes Google work better.

And google works better when the words in the article titles are spelled correctly.
:roll:

Spoke too soon.
Firefox (rightly) doesn't like:

Yup, as with so many other things, you're going to need to branch the code to put up with IE's failings.

Originally posted by Bear Bibeault:
Yup, as with so many other things, you're going to need to branch the code to put up with IE's failings.

Or use a light library that handles it already? I'll try it the JQuery way and let you know...

Originally posted by Gregg Bolinger:

...and let you know

Please do.

For now, since non-msie browsers throw a proper exception when I use the whole tag as the argument to createElement, I'm using this:

It's yucky but it seems to be working.
[ October 26, 2007: Message edited by: Ben Souther ]

This is how I do it:

http://pascarello.com/examples/createElement.html

Eric

Thanks Eric.
I'm going to use your isNameQuirk method.
I like that it only does the actual work the first time you call it.

As an aside for anyone else following this, there is another issue I found in MSIE.
If, you use the same string for the name when creating all of your buttons, and then change the name afterwards, MSIE will still see them as part of the same button group.
In FireFox, changing the names after creation will change the button grouping as well.

Yep that method shaves off milliseconds!

Eric

Originally posted by Eric Pascarello:
Yep that method shaves off milliseconds!

It's the principle of the thing dammit!
Where would we be without principles?