By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,627 Members | 1,916 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,627 IT Pros & Developers. It's quick & easy.

dynamically create radio buttons

P: n/a
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!

Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
ob*******@hotmail.com wrote:
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>

--
Rob
Jul 23 '05 #2

P: n/a
ob*******@hotmail.com wrote:
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).

--
Rob
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.