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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2003
    Location
    India
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to create Radio Button using DOM

    Hi All,

    I'm struck up with creating radio buttons using JavaScript (DOM), can any one help me in this regard.

    Thanks in advance
    Raghuram Banda

  • #2
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The only somwhat tricky part is finding the parent element to which you're going to add the radio buttons. You can use a fieldset, and style it to be appropriately invisible, should you need.

    Code:
    <html>
    <head>
    <style type="text/css">
        fieldset.radioset {
            display: inline;
            margin: 0;
            border: 0 none;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        var radioCount = 0;
        function addRadio (parentEl) {
            if (!parentEl) {
                return false;
            }
            parentEl = document.getElementById(parentEl);
            if (parentEl == null) {
                return false;
            }
            var newRadio = document.createElement("input");
            newRadio.type = "radio";
            newRadio.id = "myRadio"&++radioCount;
            newRadio.name = "myRadio";
            newRadio.value = "someValue";
            var newLabel = document.createElement("label");
            newLabel.htmlFor = "myRadio"&radioCount;
            newLabel.appendChild(document.createTextNode('someLabelText'));
            parentEl.appendChild(newRadio);
            parentEl.appendChild(newLabel);
            return false;
        }
    </script>
    </head>
    <body>
    <form action="...">
        <fieldset id="someRadios" class="radioset">
            <legend><input type="button" onclick="return addRadio('someRadios')" /></legend>
        </fieldset>
    </form>
    </body>
    </html>
    Edited to add the label for the radio button. Can't very well have a radio without a label, now, can you? The only problems I see with this script are what text strings you'd use for values, names, ids, and labels. If you can program those in, you should be pretty much free and clear.
    Last edited by Choopernickel; 09-15-2003 at 09:09 PM.


  •  

    Posting Permissions

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