Created Radio Buttons displaying as if they were conventional buttons

Discussion in 'Javascript' started by Dr. Leff, Oct 15, 2007.

  1. Dr. Leff

    Dr. Leff Guest

    Thanks for the quick help on using nextSibling in JavaScript.
    That worked.

    When I insert radio button created dynamically, it shows up as regular
    button
    and not with the familiar dot in a circle for a radio button.




    <HTML>
    <HEAD></HEAD>
    <BODY>
    <SCRIPT Language="JavaScript">
    document.write("T~ray");
    function m(rbn) {
    alert ("rbn is |"+rbn+"|");
    var aarb=document.F.g[rbn];
    alert (aarb.id);
    var Before = aarb.nextSibling;
    var Parent = Before.parentNode;
    alert ("Before |"+Before+"|");
    var P = document.createElement("P");
    var R = document.createElement("BUTTON");
    R.setAttribute("TYPE","radio");
    R.setAttribute("name","ga1");
    R.setAttribute("value","ga1");
    P.appendChild(R);
    var R = document.createElement("BUTTON");
    R.setAttribute("TYPE","radio");
    R.setAttribute("name","ga1");
    R.setAttribute("value","ga2");
    Parent.insertBefore(P,Before);
    P.appendChild(R);

    }
    var R1="gGg";
    var R2="hHh";
    </SCRIPT>

    <FORM name="F">
    <P>
    <INPUT TYPE="radio" id="g1" name="g" value="g" onClick="m(0)">G</
    INPUT>
    </P>
    <P>
    <INPUT TYPE="radio" id="h1" name="g" value="h" onClick="m(1)">H</
    INPUT>
    </P>
    </FORM>

    I tried the above program in FireFox with Firebug installed, I
    displayed
    the HTML display. Here is what I got. So it looks like the
    JavaScript put
    radio buttons in the HTML. I just don't know why they don't display
    like
    radio buttons.

    <form name="F">
    <p>
    <input id="g1" type="radio" onclick="m(0)" value="g" name="g"/>
    <p>
    <button type="radio" name="ga1" value="ga1"/>
    <button type="radio" name="ga1" value="ga2"/>
    </p>

    I earlier tried creating a DOM element with a tag name of input and
    type
    of radio. This displayed as a textbox.

    I also tried a more complex program, where insert the two newly
    created
    ga1 radio buttons after the paragraph containing the original g1 (see
    below
    for output from Firebug HTML window). That did not help, the new
    buttons with type="radio" still look like regular buttons.

    <form name="F">
    <p>
    <input id="g1" type="radio" onclick="m(0)" value="g" name="g"/>
    G
    </p>
    <button type="radio" name="ga1" value="ga1"/>
    <button type="radio" name="ga1" value="ga2"/>
    <p>
    <input id="h1" type="radio" onclick="m(1)" value="h" name="g"/>
    H
    </p>

    Dr. Laurence Leff, Associate Professor of Computer Science, Western
    Illinois University, One University Circle, Macomb IL 61455
    Fax 309 298 2302 Pager 309 367 0787:1
    Dr. Leff, Oct 15, 2007
    #1
    1. Advertising

  2. Dr. Leff

    David Mark Guest

    On Oct 14, 9:31 pm, "Dr. Leff" <> wrote:
    > Thanks for the quick help on using nextSibling in JavaScript.
    > That worked.
    >
    > When I insert radio button created dynamically, it shows up as regular
    > button
    > and not with the familiar dot in a circle for a radio button.


    I take it you are using IE. Creating radio buttons that work in IE
    requires a workaround.

    [snip]

    I don't really follow the examples. I assume this is just a test
    script. Here is a basic rearrangement of what I think you are trying
    to do.

    <html>
    <head>
    <script type="text/javascript">
    this.onload = function() {

    var addRadio = (function() {
    if (this.document.body && this.document.body.getAttribute &&
    this.document.body.getAttribute('style') &&
    typeof(this.document.body.getAttribute('style')) == 'object' &&
    typeof(this.document.body.innerHTML) == 'string') {
    return function(name, value, container) {
    container.innerHTML += '<input type="radio" value="' +
    value + '" name="' + name + '">';
    };
    }
    if (document.createElement) {
    return function(name, value, container) {
    var R = document.createElement("input");
    R.setAttribute("value", "ga1");
    R.setAttribute("name", "ga1");
    R.setAttribute("type", "radio");
    container.appendChild(R);
    };
    }
    })();

    function m() {
    var aarb = this;
    var Parent = aarb.parentNode;
    var Before = Parent.nextSibling;
    var P = document.createElement("fieldset");

    addRadio('ga1', 'ga1', P);
    addRadio('ga1', 'ga2', P);

    if (Before) {
    this.form.insertBefore(P, Before);
    }
    else {
    this.form.appendChild(P);
    }
    }

    if (addRadio) {
    var f = document.forms['F'];
    var inp;
    if (f) {
    inp = f.elements['g'];
    if (inp && inp.length == 2) {
    inp[0].onclick = inp[1].onclick = m;
    }
    }
    }

    };
    </script>
    </head>
    <body>
    <form name="F">
    <fieldset>
    <input type="radio" id="g1" name="g" value="g"><label for="g1">G</
    label>
    </fieldset>
    <fieldset>
    <input type="radio" id="h1" name="g" value="h"><label for="h1">H</
    label>
    </fieldset>
    </form>
    </body>
    </html>
    David Mark, Oct 15, 2007
    #2
    1. Advertising

  3. Dr. Leff

    David Mark Guest

    On Oct 14, 10:38 pm, David Mark <> wrote:
    [snip]
    > if (document.createElement) {
    > return function(name, value, container) {
    > var R = document.createElement("input");
    > R.setAttribute("value", "ga1");
    > R.setAttribute("name", "ga1");


    Oops. Those last two lines should obviously be:

    R.setAttribute("value", value);
    R.setAttribute("name", name);
    David Mark, Oct 15, 2007
    #3
  4. Dr. Leff

    David Mark Guest

    On Oct 14, 11:36 pm, David Mark <> wrote:
    [snip]

    Revisiting this thread, I noticed a couple of inconsistencies in the
    posted rearrangement, which could cause confusion. Certainly the
    original test case and variable names are confusing enough to begin
    with.

    <html>
    <head>
    <script type="text/javascript">
    this.onload = function() {
    var doc = this.document;
    var addRadio = (function() {
    if (doc) {
    if (doc.body && doc.body.getAttribute &&
    doc.body.getAttribute('style') &&
    typeof(doc.body.getAttribute('style')) == 'object' &&
    typeof(doc.body.innerHTML) == 'string') {
    return function(name, value, container) {
    container.innerHTML += '<input type="radio" value="' +
    value + '" name="' + name + '">';
    };
    }
    if (doc.createElement) {
    return function(name, value, container) {
    var R = doc.createElement("input");
    R.setAttribute("value", value);
    R.setAttribute("name", name);
    R.setAttribute("type", "radio");
    container.appendChild(R);
    };
    }
    }
    })();

    function m() {
    var aarb = this;
    var Parent = aarb.parentNode;
    var Before = Parent.nextSibling;
    var P = doc.createElement("fieldset");

    addRadio('ga1', 'ga1', P);
    addRadio('ga1', 'ga2', P);

    if (Before) {
    this.form.insertBefore(P, Before);
    }
    else {
    this.form.appendChild(P);
    }
    }

    if (addRadio) {
    var f = doc.forms.F;
    var inp;
    if (f) {
    inp = f.elements.g;
    if (inp && inp.length == 2) {
    inp[0].onclick = inp[1].onclick = m;
    }
    }
    }

    };
    </script>
    </head>
    <body>
    <form name="F">
    <fieldset>
    <input type="radio" id="g1" name="g" value="g"><label for="g1">G</
    label>
    </fieldset>
    <fieldset>
    <input type="radio" id="h1" name="g" value="h"><label for="h1">H</
    label>
    </fieldset>
    </form>
    </body>
    </html>
    David Mark, Oct 15, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. George
    Replies:
    2
    Views:
    361
    jasonkester
    Aug 26, 2005
  2. Darren Dale
    Replies:
    8
    Views:
    330
    Darren Dale
    Aug 3, 2004
  3. rdc02271
    Replies:
    24
    Views:
    723
    Jacek Dziedzic
    Dec 27, 2005
  4. timjowers
    Replies:
    1
    Views:
    5,145
    johnj
    May 4, 2011
  5. Dr. Leff
    Replies:
    3
    Views:
    282
    David Mark
    Oct 15, 2007
Loading...

Share This Page