Forum:

HTML Pages with CSS and JavaScript

Dynamically drawn radio buttons not working in MSIE

Ben Souther

Sheriff

Posts: 13411

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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>

Java API J2EE API Servlet Spec JSP Spec How to ask a question... Simple Servlet Examples jsonf

Ben Souther

Sheriff

Posts: 13411

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Java API J2EE API Servlet Spec JSP Spec How to ask a question... Simple Servlet Examples jsonf

Gregg Bolinger

Ranch Hand

Posts: 15304

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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:

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Ben Souther

Sheriff

Posts: 13411

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Java API J2EE API Servlet Spec JSP Spec How to ask a question... Simple Servlet Examples jsonf

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

[Asking smart questions] [About Bear] [Books by Bear]

Gregg Bolinger

Ranch Hand

Posts: 15304

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Ben Souther

Sheriff

Posts: 13411

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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 ]

Java API J2EE API Servlet Spec JSP Spec How to ask a question... Simple Servlet Examples jsonf

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This is how I do it:

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

Eric

Ben Souther

Sheriff

Posts: 13411

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Java API J2EE API Servlet Spec JSP Spec How to ask a question... Simple Servlet Examples jsonf