Created Radio Buttons displaying as if they were conventional buttons

D

Dr. Leff

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
 
D

David Mark

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.
 
D

Dr. Laurence Leff

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

David Mark

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,830
Latest member
ZADIva7383

Latest Threads

Top