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, 10:04 pm, Randy Webb <> wrote:
    > Dr. Leff said the following on 10/14/2007 9:31 PM:
    >
    > > 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.

    >
    > Radio buttons have a checked property that you will have to set.
    >
    > > R.setAttribute("TYPE","radio");
    > > R.setAttribute("name","ga1");
    > > R.setAttribute("value","ga1");

    >
    > R.checked = true;


    That checked dot still won't show up. IE just can't create usable
    radio buttons in the standard way. This is due to problems with the
    element type and name properties.
     
    David Mark, Oct 15, 2007
    #2
    1. Advertising

  3. Thank you, Messrs. Webb and Mark, for your detailed response to my query
    on creating radio buttons dynamically in Internet Explorer and
    Mozilla using Javascript.

    The trick was to access the innerHTML property and add the text for
    the radio buttons to that. As mentioned by Mr. Mark, the solution of
    using the DOM Element commands to add the radio button does not work.
    (In my experience, it did not work in either Mozilla Firefox or
    Internet Explorer.) That leads to a very simple solution. Internet
    Explorer always left the created radio buttons checked while Mozilla
    started them off unchecked. The solution was to use the DOM commands
    to find the radio button and set the checked property to true as illustrated
    below:

    Working solution in both FireFox Version 2.0.0.6 (Mozilla/5.0, Gecko 20070725)
    and Internet Explorer Seven ( Version 7.0.5730.11)

    <HTML>
    <HEAD></HEAD>
    <BODY>
    <SCRIPT Language="JavaScript">
    document.write("T~rAY");
    function m(rbn) {
    alert ("rbn is |"+rbn+"|");
    var aarb=document.getElementById(rbn);
    alert (aarb.id);
    var STR = '<input type="radio" name="ga1" value="ga1" >';

    aarb.innerHTML += STR;
    STR = '<input type="radio" name="ga1" value="ga2" >';
    aarb.innerHTML += STR;

    /* turn off all check boxes, needed for Internet Explorer */
    L = aarb.childNodes();
    for (I = 0 ; I < L.length; L++) {
    E = L;
    E.checked = false;
    }

    }
    </SCRIPT>

    <FORM name="F">
    <P id='g1'>
    <INPUT TYPE="radio" name="g" value="g" onClick="m('g1')">G</INPUT>
    </P>
    <P id='h1'>
    <INPUT TYPE="radio" name="g" value="h" onClick="m('h1')">H</INPUT>
    </P>
    </FORM>
     
    Dr. Laurence Leff, Oct 15, 2007
    #3
  4. Dr. Leff

    David Mark Guest

    On Oct 15, 3:07 pm, (Dr. Laurence Leff) wrote:
    > Thank you, Messrs. Webb and Mark, for your detailed response to my query
    > on creating radio buttons dynamically in Internet Explorer and
    > Mozilla using Javascript.
    >
    > The trick was to access the innerHTML property and add the text for
    > the radio buttons to that. As mentioned by Mr. Mark, the solution of
    > using the DOM Element commands to add the radio button does not work.
    > (In my experience, it did not work in either Mozilla Firefox or
    > Internet Explorer.) That leads to a very simple solution.


    The example I posted worked in everything I tried it in. At least it
    worked in the way I thought your test case was supposed to work. The
    only browser that needed the innerHTML workaround was IE. None of the
    browsers tested checked the radio buttons initially.
     
    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:
    373
    jasonkester
    Aug 26, 2005
  2. Darren Dale
    Replies:
    8
    Views:
    341
    Darren Dale
    Aug 3, 2004
  3. rdc02271
    Replies:
    24
    Views:
    743
    Jacek Dziedzic
    Dec 27, 2005
  4. timjowers
    Replies:
    1
    Views:
    5,250
    johnj
    May 4, 2011
  5. Dr. Leff
    Replies:
    3
    Views:
    232
    David Mark
    Oct 15, 2007
Loading...

Share This Page