dynamicaly creating radio button does not work in IE

[sam]

Hi all,
I am dynamically creating a table rows and inerting radio buttons which
are also dynamically created. Everything works fine in Firefox as
expected. But I am not able to select radio buttons in IE. It does not
even throw any errors. I have searched over the net but could not find
anyhelp. Hope some experts here could help me.
Here is part my code that dynamically generates the radio buttons, I
cannot paste the entire code as it is very huge.

var n = 0;
var row = table.insertRow(table.rows.length);
var cell = row.insertCell(row.cells.length);

cell = row.insertCell(row.cells.length);
var radio = document.createElement('input');
radio.setAttribute('type', 'radio');
radio.setAttribute('name', 'test'+n);
radio.setAttribute('value', 'test123');
radio.setAttribute('onclick', "this.form['test"+n+"'].disabled =
true;");
cell.appendChild(radio);
cell = row.insertCell(row.cells.length);

Any help really aprreciated.

thanks,
Sam

 

[Gérard Talbot]

sam wrote :

Hi all,
I am dynamically creating a table rows and inerting radio buttons which
are also dynamically created. Everything works fine in Firefox as
expected. But I am not able to select radio buttons in IE.

You mean check radio buttons.

It does not

even throw any errors.

When you seek help, it is always best to provide an url along with the
message text of the javascript error being reported.

I have searched over the net but could not find
anyhelp. Hope some experts here could help me.
Here is part my code that dynamically generates the radio buttons, I
cannot paste the entire code as it is very huge.

var n = 0;
var row = table.insertRow(table.rows.length);

You may want to consider -1 instead of requiring the browser to
calculate the table.rows.length. What you do though (using
table.rows.length) is more self-explanatory, intuitive, helps code
maintenance.

var objTRow = table.insertRow(-1);
"If index is -1 or equal to the number of rows, the new row is appended."
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903

var cell = row.insertCell(row.cells.length);

var objTCell = row.insertCell(-1);

"If index is -1 or equal to the number of cells, the new cell is appended."
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016

cell = row.insertCell(row.cells.length);

You have twice the same assignment here.

var radio = document.createElement('input');
radio.setAttribute('type', 'radio');

MSIE 6 is DOM 1 (HTML interface) compliant but is not DOM 2 compliant.

http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-6043025

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025

Type was read-only in DOM 1; this was changed in DOM 2.

radio.setAttribute('name', 'test'+n);

One other thing: you should prefer DOM 2 HTML interface methods instead
of using setAttribute since setAttribute is less widely supported in
browsers or is less buggy.

radio.setAttribute('value', 'test123');
radio.setAttribute('onclick', "this.form['test"+n+"'].disabled =
true;");

This is likely not to succeed. Event attributes are not set that way.
Instead:

radio.onclick = new Function("evt", "this.form['test"+n+"'].disabled =
true;")

cell.appendChild(radio);
cell = row.insertCell(row.cells.length);

Any help really aprreciated.

thanks,
Sam

Dynamically create dynamically radio buttons
http://www.gtalbot.org/DHTMLSection/DynamicallyCreateRadioButtons.html

Please read my copyright notice:
http://www.gtalbot.org/Varia/CopyrightNotice.html

MSIE 6 bug: Dynamically inserted radio button is not checkable
http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/CheckableInsertedRadioButton.html

which I have reported already to MSIE 7 dev. team.

Gérard

 

[RobG]

sam said on 15/03/2006 10:26 AM AEST:

Hi all,
I am dynamically creating a table rows and inerting radio buttons which
are also dynamically created. Everything works fine in Firefox as
expected. But I am not able to select radio buttons in IE. It does not

You can have a radio button in the source HTML that is hidden (say set
its display attribute to 'none') and then clone it whenever you want to
add other.

even throw any errors. I have searched over the net but could not find
anyhelp. Hope some experts here could help me.
Here is part my code that dynamically generates the radio buttons, I
cannot paste the entire code as it is very huge.

var n = 0;
var row = table.insertRow(table.rows.length);
var cell = row.insertCell(row.cells.length);

cell = row.insertCell(row.cells.length);
var radio = document.createElement('input');

Somewhere in your HTML source put:

<input type="radio" id="baseRadioButton" style="display: none;">

Then (with appropriate feature testing) clone it as required:

var radio =
document.getElementById('baseRadioButton').cloneNode(false);

radio.style.display = '';

radio.setAttribute('type', 'radio');
radio.setAttribute('name', 'test'+n);
radio.setAttribute('value', 'test123');
radio.setAttribute('onclick', "this.form['test"+n+"'].disabled =
true;");

And then (remember to change the ID):

radio.id = 'test' + n;
radio.name = 'test' + n;
radio.value = 'test123';
radio.onclick = new Function(
'this.form["test' + n + '"].disabled = true;');

 

[Danny]

For IE, do it by means of property, setAtrribute() is correct,
however IE has issues with setAttribute() :/ , use instead,
radio.type=..; radio.onclick=...;


Danny

 

[BootNic]

Hi all,
I am dynamically creating a table rows and inerting radio buttons
which are also dynamically created. Everything works fine in
Firefox as expected. But I am not able to select radio buttons in
IE. It does not even throw any errors. I have searched over the net
but could not find anyhelp. Hope some experts here could help me.
Here is part my code that dynamically generates the radio buttons, I
cannot paste the entire code as it is very huge.

[snip]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
<!--[if IE]>
<script type="text/javascript">
var IE=1;
</script>
<![endif]-->
<script type="text/javascript">
var n=0;
function addRadio(){
var i=0;
while(i<5){
if(typeof(IE)=='number'){
j=document.createElement('<input name=" ">');
}
else {
j=document.createElement('input');
}
j.name='willy';
j.type='radio';
j.value=++n;
document.body.appendChild(j);
label=document.createElement('label');
j.id=label.htmlFor='willy'+n;
label.appendChild(document.createTextNode('willy'+n));
document.body.appendChild(label);
document.body.appendChild(document.createElement('br'));
i++;
}
}
</script>
<title></title>
</head>
<body>
<p><button onclick="addRadio()">Add Radio button</button></p>
</body>
</html>

--
BootNic Wednesday, March 15, 2006 2:59 AM

"I suppose they are vicious rascals, but it scarcely matters what
they are. I'm after what they know."
*Gibson-Sterling, The Difference Engine*

 

[sam]

Thanks to one and all who responded .. All the answers really helped me
inprove my code and now it works in IE as well..

Thanks,
Sam