Created Radio Buttons displaying as if they were conventional buttons

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 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;

Also, you shouldn't get in the habit of using setAttribute if you script
for the web. There are instances in IE where it is utterly broken and
useless.

R.type = 'radio';
R.name = 'ga1';
R.value = 'ga1';

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

On Oct 14, 10:04 pm, Randy Webb <HikksNotAtH...@aol.com> 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.

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[I];
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>

On Oct 15, 3:07 pm, mf...@wiu.edu (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.

Created Radio Buttons displaying as if they were conventional buttons - Javascript