Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post

    Appending Newly Created Radio Button Does Not Work?

    Consider this code:

    Code:
    <script type=text/javascript>
     <!--//
      function addRadio(frm){
        var r=document.createElement('input');
        r.setAttribute("type","radio");
        r.setAttribute("value","r_value");
        r.setAttribute("name","r1");
        r.setAttribute("onclick","alert(this.name)");
        frm.appendChild(r);
      }
     //-->
    </script>
    
    <form>
    <input type="button" onclick="addRadio(this.form)" value="add radio" />
    </form>
    The new radio button will appear but it is not selectable. The page will properly report that it is a member of the forms collection. When checking to see if the page is aware of the name, value, and other attributes it responds properly. When viewing the generated source code it shows the following:


    Code:
    <INPUT onclick=alert(this.name) type=radio value=r_value>
    What is more curious is that the name attribute does not show up on the generated source code but If I were to ask the page for the name of the 2nd form element it would properly respond "r1"

    Any ideas to what is going on? How can I make it so the radio button is selectable?

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I haven't played much with setAttribute but you can attach your function call by directly accessing the onlick event.

    This will make it work: r.onclick = new Function("alert(this.name)");

    ......Willy

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Yes that gets the onclick working BUT I still cannot actually select the radio button, it won't check.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    When you use the DOM method to create new elements in IE, name attribute is not recognized. Also in IE, radio button without name attribute is not selectable. Blame that to IE's "faulty" behavior. Try your code in Moz and it will work.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, I see said the blind man....

    Try this:

    Code:
    <script type=text/javascript>
     <!--//
      function addRadio(frm){
        var r=document.createElement('input');
        r.type = "radio";
        r.value = "r_value";
        r.name = "r1";
        r.onclick = function(){this.checked = true};
        frm.appendChild(r);
      }
     //-->
    </script>
    
    <form action="http://google.com" method="get">
    <input type="submit" value="Test">
    <input type="button" onclick="addRadio(this.form)" value="add radio" />
    <input type="radio" name="r1" value="r_Origvalue" />
    </form>
    Sorry, I converted it to direct assignment which I am more used too while testing. You will need to convert back to getters/setters but it should work either way....

    ......Willy

    Edit: I tested the above in IE6 and using this method the radio is checkable and the name and value pass on the form.....
    Last edited by Willy Duitt; 07-07-2004 at 07:47 AM.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    I tried that earlier and while it lets me select a radio button it lets me select as many of them as I want defeating the purpose of having a radio button in the first place.

    Sounds like what glenngv says is exactly why I having this problem. Does ant one know of any work arounds?

  • #7
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    NAME Attribute | name Property
    The NAME attribute cannot be set at run time on elements dynamically created with the createElement method. To create an element with a name attribute, include the attribute and value when using the createElement method.

    Examples

    The following example shows how to set the NAME attribute on a dynamically created A element.

    var oAnchor = document.createElement("<A NAME='AnchorName'></A>");

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Ok, so this seems to work in IE6 and mozilla does anyone see any problems with it?


    Code:
    <script type=text/javascript>
     <!--//
      var idx=0;
      function addRadio(frm){
        var r=document.createElement(document.all?'<input name="r">':'input');
        r.setAttribute("type","radio");
        r.setAttribute("value","r_"+idx);
        r.setAttribute("name","r");
        r.onclick = function(){alert(this.value)};
        frm.appendChild(r);
        idx++;
      }
     //-->
    </script>
    
    <form>
    <input type="button" onclick="addRadio(this.form)" value="add radio" />
    </form>

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Checking for document.all is not sufficient for IE as Opera and Konqueror browsers can be spoofed as IE. AFAIK, those 2 browsers allow the name attribute to be set with createElement method just like what Moz does.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #10
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    document.uniqueID should single out I.E.


  •  

    Posting Permissions

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