How to create a RADIO button using DOM

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Raghuram Banda

    How to create a RADIO button using DOM

    Hi,

    Can any one help me, how to create a Radio button using DOM with default
    one option is selected

    Thanks in advance

  • DU

    #2
    Re: How to create a RADIO button using DOM

    Raghuram Banda wrote:[color=blue]
    > Hi,
    >
    > Can any one help me, how to create a Radio button using DOM with default
    > one option is selected
    >
    > Thanks in advance
    >[/color]

    The following compliant, validated and tested code will work flawlessly,
    impeccably in Opera 7.20, NS 7.1 and Mozilla 1.5b. MSIE 6 for windows
    will create the radio buttons and labels but checking the radio buttons
    won't work: this is due to a current DOM-tree-modification limitation in
    that browser.

    DU
    --
    Javascript and Browser bugs:

    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x


    ------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en-us">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Dynamica lly created radio buttons</title>

    <style type="text/css">
    body {margin:16px; color:black; background-color:white;}
    </style>

    <script type="text/javascript">
    var arrData = [["0", "Man"],["1", "Woman"],["2", "Monkey"]];
    function addGroup3Radio( )
    {
    var objDiv = document.getEle mentById("idDiv ");
    for (var i=0; i < arrData.length; i++)
    {
    var objRadItem = document.create Element("input" );
    objRadItem.type = "radio";
    objRadItem.name = "radGroup";
    objRadItem.id = "idrad_" + i;
    objRadItem.valu e = arrData[i][0];

    if(i == 1) {objRadItem.def aultChecked = true; objRadItem.chec ked = true; };

    var objTextNode = document.create TextNode(" " + arrData[i][1]);

    var objLabel = document.create Element("label" );
    objLabel.htmlFo r = objRadItem.id;
    objLabel.append Child(objRadIte m);
    objLabel.append Child(objTextNo de);

    var objBreak = document.create Element("br");

    objDiv.appendCh ild(objLabel);
    objDiv.appendCh ild(objBreak);
    };
    document.forms["FirstFormN ame"].cmdAdd.disable d = true;
    }
    </script>
    </head>

    <body>

    <form name="FirstForm Name" action="">
    <p>
    <input type="button" name="cmdAdd" value="Add a group of 3 radio
    buttons" onclick="addGro up3Radio();">
    </p>
    </form>

    <form name="SecondFor mName" action="">
    <div id="idDiv"></div>
    </form>

    </body></html>

    Comment

    Working...