obsidian8@hotmail.com wrote:[color=blue]
> 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:[/color]
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.
[color=blue]
> function test(){
> componentMainTable = document.getElementById("mycomponent");
> componentTable = document.createElement("table");
> componentBody = document.createElement("tbody");
> componentMainTable.setAttribute("width","100");[/color]
Setting style attributes is better done directly using the style
object:
componentMainTable.style.width = "100";
[color=blue]
>
> //row and table information is created here
> row1 = document.createElement("tr");
> tab1 = document.createElement("td");
> tab1.setAttribute("width", "33%");
> tab1.setAttribute("align", "center");[/color]
The same here:
tab1.style.width = "33%";
tab1.style.textAlign = "center";
[color=blue]
> field1 = document.createElement("input");
> field1.setAttribute("type","radio");
> field1.setAttribute("name","one");
> field1.setAttribute("value", 1);[/color]
Element attributes can be set directly:
field1.type = "radio";
field1.name = "one";
field1.value = "1";
[...][color=blue]
> field1.setAttribute("checked","checked");[/color]
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>
--
Rob
