SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE - Unselectable radio buttons :(

    Hi all,

    For some reason, my dynamically generated radio buttons will not allow you to check them.

    It highlights when you hover over and changes to down state when you click but doesn't actually change it to checked.

    I've also tried setting it to checked = true using the onclick event which won't work.

    Any idea's?

    Cheers

    Gav


  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Odd.... Can you reproduce this bug with a stand-alone demo?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jimmy I knew I could rely on your help!

    I certainly have:

    Code javascript:
    <!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>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                window.onload = function() {
                    var test = document.getElementById('test');
                    for(var i = 0; i < 10; i++) {
                        var input = document.createElement('input');
                            input.value = '';
                            input.name = 'category[]';
                            input.onclick = function() {
     
                            }
                            input.setAttribute('type', 'radio');
                            //input.type = 'radio';
                            test.appendChild(input);
                    }
                }
     
            </script>
        </head>
        <body>
     
            <div id="test"></div>
     
        </body>
    </html>

    note: I know the window.onload method shouldn't be used


  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hardly ever use radio buttons but I can see what you mean. Using firebug no attribute is added but it's still possible to check for the 'checked' button like this:

    Code JavaScript:
    var inputs = document.getElementsByTagName('input'), l = inputs.length;
    while(l--) {
        if ( inputs[l].type==='radio' && inputs[l].checked ) alert(inputs[l].value);
    }

    You need to add a value to each of your radio buttons though. Since you're generating them all within a loop maybe you could just set the iterator as the value:

    Code JavaScript:
    input.value = i;

    AFAIK the actual "checked" attribute is only used for setting defaults, the attribute is not actually added to the input elements when they're clicked/selected.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am setting a value but with or without it, it made no difference so I removed it. In Firefox there isn't an issue? Unless your using the firebug js for ie?

    When you click on it, the checked value doesn't seem to change. Plus i'd need to update the ui as well....


  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm testing on FF. What exactly do you need to do with the checked button? - what actions do you want to perform on it.

    The code in my last post can be used to detect which one is checked within a particular group (a radio group - defined by all those with the same name i.e. 'category[]')...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when clicked, it has to show the radio button has been checked and then on the onclick event, it updates a hidden field containing some values.

    It seems that even the onclick event isn't even being thrown when clicking on the radio button. I can't check it using any method, manual or programatic

    Thanks for your help btw. Especially this late at night!


  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So basically, all you want to do is have a hidden input field which reflects the value of the selected radio button??

    This seems to work for me:

    Code html4strict:
    <!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>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                window.onload = function() {
                    var test = document.getElementById('test');
                    for(var i = 0; i < 10; i++) {
                        var input = document.createElement('input');
                            input.value = i;
                            input.name = 'category[]';
                            input.onclick = function() {
                                alert(this.value);
                                document.getElementById('hidden').value = this.value;
                            }
                            input.setAttribute('type', 'radio');
                            test.appendChild(input);
                    }
                }
     
            </script>
        </head>
        <body>
     
            <div id="test"></div>
            <input type="hidden" id="hidden" name="hidden" />
     
        </body>
    </html>


    Is Birtley in a different time zone!? ... It's only 11pm! I only just woke up!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  9. #9
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol I thought you may have more important/interesting things to do with your friday evening... I know I have ...

    Whilst your example works, it doesn't check the radio button, something my client is demanding... It just seems strange that you can't check it.


  10. #10
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    lol I thought you may have more important/interesting things to do with your friday evening... I know I have ...
    No way, not today! Had a splitting headache this morning so helping out on SP is pretty much the most "active" I've been all day!

    Quote Originally Posted by gRoberts View Post
    Whilst your example works, it doesn't check the radio button, something my client is demanding... It just seems strange that you can't check it.
    What do you mean when you say "check" ... Why don't you just use checkboxes instead of radio buttons?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    A recept post, #20 from "how to display onclick result" goes through the IE DOM bugs with dynamically created radio buttons and goes through a solution inspired from http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •