dynamically create radio buttons

obsidian8 · Jan 17, 2005

Hi All,

I have looked around for an answer to this question, but haven't found
one as of yet. I'm trying to use javascript to dynamically create
raido buttons. I am able to create them easily enough but they aren't
clickable. It doesn't matter if I set them as checked or not, you can't
manipulate them at all. The code I'm using appears below:

function test(){
componentMainTable = document.getElementById("mycomponent");
componentTable = document.createElement("table");
componentBody = document.createElement("tbody");
componentMainTable.setAttribute("width","100");

//row and table information is created here
row1 = document.createElement("tr");
tab1 = document.createElement("td");
tab1.setAttribute("width", "33%");
tab1.setAttribute("align", "center");
field1 = document.createElement("input");
field1.setAttribute("type","radio");
field1.setAttribute("name","one");
field1.setAttribute("value", 1);
tab2 = document.createElement("td");
tab2.setAttribute("width", "33%");
tab2.setAttribute("align", "center");
field2 = document.createElement("input");
field2.setAttribute("type","radio");
field2.setAttribute("name","one");
field2.setAttribute("value",2);
tab1.appendChild(field1);
tab2.appendChild(field2);
row1.appendChild(tab1);
row1.appendChild(tab2);
componentBody.appendChild(row1);
componentTable.appendChild(componentBody);
componentMainTable.appendChild(componentTable);
field1.setAttribute("checked","checked");

}

If anyone can shed some light on this for me, I would be tremendously
grateful!

RobG · Jan 17, 2005

Hi All,

I have looked around for an answer to this question, but haven't found
one as of yet. I'm trying to use javascript to dynamically create
raido buttons. I am able to create them easily enough but they aren't
clickable. It doesn't matter if I set them as checked or not, you can't
manipulate them at all. The code I'm using appears below:

Your code works provided the HTML includes something like:

<div id="mycomponent" style="border: thin solid blue">
</div>

I have added a border so you can see the elements in the page, remove
if you wish.

function test(){
componentMainTable = document.getElementById("mycomponent");
componentTable = document.createElement("table");
componentBody = document.createElement("tbody");
componentMainTable.setAttribute("width","100");

Setting style attributes is better done directly using the style
object:

componentMainTable.style.width = "100";

//row and table information is created here
row1 = document.createElement("tr");
tab1 = document.createElement("td");
tab1.setAttribute("width", "33%");
tab1.setAttribute("align", "center");

The same here:

tab1.style.width = "33%";
tab1.style.textAlign = "center";

field1 = document.createElement("input");
field1.setAttribute("type","radio");
field1.setAttribute("name","one");
field1.setAttribute("value", 1);

Element attributes can be set directly:

field1.type = "radio";
field1.name = "one";
field1.value = "1";

[...]

field1.setAttribute("checked","checked");

field1.checked = true;

However, it works fine in Firefox but doesn't work in IE. Your
radio buttons should be in a form, but that doesn't fix anything.
Below is a minimal implementation of your code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>demo</title>
<script type="text/javascript">

function test(){

theSpot = document.getElementById("mycomponent");

field1 = document.createElement("input");
field1.type = "radio";
field1.name = "one";
field1.value = "1";

field2 = document.createElement("input");
field2.type = "radio";
field2.name = "one";
field2.value = "2";

theSub = document.createElement("input");
theSub.type = "submit";

theForm = document.createElement("form");
theForm.action = "";
theForm.appendChild(field1);
theForm.appendChild(field2);
theForm.appendChild(theSub);
theSpot.appendChild(theForm);
field1.checked = true;
}
</script>
</head>
<body onload="test();">
<div id="mycomponent" style="border: thin solid blue">
</div>
</body>
</html>

RobG · Jan 17, 2005

Hi All,

I have looked around for an answer to this question, but haven't found
one as of yet. I'm trying to use javascript to dynamically create
raido buttons. I am able to create them easily enough but they aren't
clickable. It doesn't matter if I set them as checked or not, you can't
manipulate them at all. The code I'm using appears below:

Unfortunately, it seems DOM methods don't work with IE here. The
following innerHTML works in Firefox and IE:

theSpot = document.getElementById("mycomponent");

var s = [
'<form action="">',
'<input type="radio" name="one" value="1" checked>',
'<input type="radio" name="one" value="2">',
'<input type="submit">',
'</form>'
];

theSpot.innerHTML = s.join('');

If you want to use innerHTML and a table, you can either fill in the
content of a cell, or do the entire table. You can't add/remove
rows/cells with innerHTML (it actually seems to work in Firefox, but
not in IE - the MS spec says it doesn't work in IE and they're right).

Only one table shows up with the information	2	Mar 29, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
I need help making a zooming function	11	Dec 14, 2021
DOM Scripting Not Working In IE	9	Jan 10, 2008
dynamic row table option problem	2	Sep 26, 2009
DOM javascript working fine with IE but nothing happens with Firefox	6	May 17, 2007
calculations using createElement input text boxes in a table	2	Dec 5, 2006
Radio button question (I'm sure has been answered but I don't know what to search on)	7	May 1, 2006

dynamically create radio buttons

obsidian8

RobG

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads