Created Radio Buttons displaying as if they were conventional buttons

Dr. Leff · Oct 15, 2007

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

David Mark · Oct 15, 2007

Dr. Leff said the following on 10/14/2007 9:31 PM:

Radio buttons have a checked property that you will have to set.

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.

Dr. Laurence Leff · Oct 15, 2007

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>

David Mark · Oct 15, 2007

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.

How can I arrange a series of radio buttons?	2	Jan 25, 2024
I dont get this. Please help me!!	2	Jan 24, 2023
nextSibling on element retrieved from document	2	Oct 14, 2007
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Buttons lining up	1	Feb 6, 2022
Check forms With JavaScript	1	Mar 28, 2023
Php modal form to email	1	Aug 28, 2024
How to treat an input data as variable?	4	Apr 13, 2023

Created Radio Buttons displaying as if they were conventional buttons

Dr. Leff

David Mark

Dr. Laurence Leff

David Mark

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads