Radio button question (I'm sure has been answered but I don't know what to search on)

[nathaniel.k.lee]

Is it not possible, in IE, to dynamically click a radio button? I'm
grabbing some values from a database and using them to populate radio
buttons on a page. I have alternate code for Firefox browsers using the
setAttribute() function.

Everything works as planned in Firefox but in IE, the buttons won't
populate and, what's worse, I can't even click on them after everything
loads. I see the slight shadow that indicates you're clicking on a
radio button, but the black dot doesn't appear inside any of the radio
buttons when I click on them.

:-(


obj4 = document.createElement("input");
obj4.name = "test";
obj4.type = "radio";
obj4.value = 1;
if (i == 1) { obj4.checked = true; obj4.click(); }

obj5 = document.createElement("input");
obj5.name = "test";
obj5.type = "radio";
obj5.value = 2;
if (i == 2) { obj5.checked = true; obj5.click(); }

obj6 = document.createElement("input");
obj6.name = "test";
obj6.type = "radio";
obj6.value = 3;
if (i == 3) { obj6.checked = true; obj6.click(); }

 

[stannyc]

Nathaniel K. write:

Is it not possible, in IE, to dynamically click a radio button? I'm
grabbing some values from a database and using them to populate radio
buttons on a page.

IE has a quirk -- it doesn't let you add the name attribute after
you've created the element. For IE, you need to assign the name like
this:

var newInp = document.createElement("<input type='radio' name='test'
value='4'>");

You can either set the new radio button's "selected" attribute inside
the createElement itself, or, in code:

newInp.click();

Stan Scott
New York City

 

[RobG]

(e-mail address removed) said on 02/05/2006 9:18 AM AEST:

Nathaniel K. write:



IE has a quirk -- it doesn't let you add the name attribute after
you've created the element. For IE, you need to assign the name like
this:

As was pointed out in a recent thread, IE does add the name attribute to
input elements created using createElement, however IE won't allow you
to use the name attribute to get a reference to the element. You also
can't see the name attribute in the element's innerHTML, and once the
script ends you can't access the name attribute of the element (e.g.
alert(inputRef.name) shows an empty string).

<URL:http://groups.google.co.uk/group/co...+name+dynamic+element&rnum=2#552cbda3521fab6e>

If you create the element and add a name property, then submit the form,
you'll see the added element and it's name in the data, so the name is
added.

var newInp = document.createElement("<input type='radio' name='test'
value='4'>");

That is an IE-ism that probably only works in IE. If the OP really
needs to get a reference to the element using its name, the easiest way
is to also add an ID and use that instead.

 

[RobG]

(e-mail address removed) said on 02/05/2006 4:54 AM AEST:

Is it not possible, in IE, to dynamically click a radio button? I'm

No, it is possible but IE has trouble using the name attribute with
dynamically added elements. It also has problems with letting you check
dynamically added radios, etc.

grabbing some values from a database and using them to populate radio
buttons on a page. I have alternate code for Firefox browsers using the
setAttribute() function.

Everything works as planned in Firefox but in IE, the buttons won't
populate and, what's worse, I can't even click on them after everything
loads. I see the slight shadow that indicates you're clicking on a
radio button, but the black dot doesn't appear inside any of the radio
buttons when I click on them.

Add the name attribute anyway (it is actually added, just that accessing
it is buggy in IE). You can add elements using IE's special method, but
it will barf in (all?) other browsers.

The following example uses either the standard DOM method or IE's
special method if needed. It's a bit of a kludge and relies on
try..catch, anyone with a better method is welcome to chip in:


<script type="text/javascript">

function addRadios(form, grpName, num)
{
var oRadio, e;
var dom = true;
for (var i=0; i<num; ++i){
if (dom){

// Create radio button, give it a name and add to form
oRadio = document.createElement('input');
oRadio.name = grpName;
form.appendChild(oRadio);

// Test if can access radio button group
// If not, remove element and set dom
if ( 0 == i && !document.getElementsByName(grpName).length){
dom = false;
form.removeChild(oRadio);
}
}

// If dom set to false, use IE method to add element
if (!dom){
try {
oRadio = document.createElement('<input type="radio"'
+ ' name="' + grpName + '">');
form.appendChild(oRadio);
} catch (e){ e = true;}

// If got to here and no error, add attributes to element
// and element to document
}
if (!e){
oRadio.type = 'radio';
oRadio.onclick = rbClicked;
oRadio.value = grpName + ' ' + i;
form.appendChild(document.createTextNode('rad-' + i));
form.appendChild(document.createElement('br'));
}
}
}

// A play onclick function to show name is set
function rbClicked(){
alert('Clicked me!'
+ '\nName: ' + this.name
+ '\nValue: ' + this.value);
}
</script>

<form action="" name="aFrom"><div>
<input type="button" value="Add radios"
onclick="addRadios(this.form, 'rBtnGrp', 4);"><br>
<input type="button" value="Click second radio"
onclick="
alert('There are ' + document.getElementsByName('rBtnGrp').length
+ ' radio buttons');
this.form.rBtnGrp[1].click();
"><br>
</div></form>

 

[BootNic]

news:[email protected]....

[snip]
anyone with a better method is welcome to chip in:

Better? Not sure if its better, but how about using a conditional
compilation statement.

http://msdn2.microsoft.com/en-us/library/ahx1z4fs(VS.80).aspx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
label{cursorointer;}
</style>
<script type="text/javascript">
function addRadios(form, grpName, num){
var oRadio, e, lab;
for (var i=0; i<num; ++i){
/*@cc_on
@if (!@oRadio)
oRadio = document.createElement('<input name="'+grpName+'">');
@else @*/
oRadio = document.createElement('input');
oRadio.name = grpName;
form.appendChild(oRadio);
/*@end @*/
oRadio.type = 'radio';
oRadio.onclick = rbClicked;
oRadio.value = grpName + ' ' + i;
form.appendChild(oRadio);
lab=document.createElement('label');
lab.htmlFor=oRadio.id=oRadio+i;
lab.appendChild(document.createTextNode('rad-' + i));
form.appendChild(lab);
form.appendChild(document.createElement('br'));
}
}
// A play onclick function to show name is set
function rbClicked(){
alert('Clicked me!'+
'\nName: ' + this.name+
'\nValue: ' + this.value);
}
</script>
<title></title>
</head>
<body>
<form action="#" name="aFrom" id="aFrom">
<div>
<input type="button" value="Add radios" onclick=
"addRadios(this.form, 'rBtnGrp', 4);"><br>
<input type="button" value="Click second radio" onclick=
"alert('There are '+
document.getElementsByName('rBtnGrp').length+
' radio buttons'); this.form.rBtnGrp[1].click();">
<br>
</div>
</form>
</body>
</html>

--
BootNic Tuesday, May 02, 2006 9:10 AM

People grow through experience if they meet life honestly and
courageously. This is how character is built.
*Eleanor Roosevelt*

 

[BootNic]

news:[email protected].... [snip]
/*@cc_on
@if (!@oRadio)
oRadio = document.createElement('<input name="'+grpName+'">');
@else @*/
oRadio = document.createElement('input');
oRadio.name = grpName;
form.appendChild(oRadio);

^ that append should be removed.
[snip]

--
BootNic Tuesday, May 02, 2006 9:18 AM

I try to take one day at a time, but sometimes several days attack me
at once.
*Jennifer Unlimited*

 

[BootNic]

news:[email protected].... [snip]
lab.htmlFor=oRadio.id=oRadio+i;

lab.htmlFor=oRadio.id=oRadio.name+i;

Perhaps I should have just left the suggestion and a link without an
example.

--
BootNic Tuesday, May 02, 2006 9:37 AM

If you can learn from hard knocks, you can also learn from soft
touches.
*Carolyn Kenmore*

 

[Gérard Talbot]

(e-mail address removed) wrote :

(e-mail address removed)

You multi-posted !! You were answered in the other comp.lang. group.

"What would cause radio buttons to not be clickable?"
comp.infosystems.www.authoring.html

Gérard