na*************@gmail.com 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>
--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>