Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Created Radio Buttons displaying as if they were conventional buttons

Reply
Thread Tools

Created Radio Buttons displaying as if they were conventional buttons

 
 
Dr. Leff
Guest
Posts: n/a
 
      10-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

 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      10-15-2007
On Oct 14, 9:31 pm, "Dr. Leff" <(E-Mail Removed)> 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>

 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      10-15-2007
On Oct 14, 10:38 pm, David Mark <(E-Mail Removed)> 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);

 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      10-15-2007
On Oct 14, 11:36 pm, David Mark <(E-Mail Removed)> 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>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Created Radio Buttons displaying as if they were conventional buttons Dr. Leff Javascript 3 10-15-2007 09:47 PM
ASP.NET Reset Radio Button in a group of Radio Buttons Scott D Johnson ASP .Net 1 09-27-2006 10:38 PM
Dynamicly created Radio Buttons Wayne Sepega ASP .Net 2 01-05-2006 04:30 PM
Urgent: Why doesn't this work - dynamically created radio buttons mortb Javascript 2 07-02-2004 05:04 PM
they turn, they power, they make nice pics Keith and Jenn Z. Digital Photography 0 09-21-2003 04:16 AM



Advertisments