473,398 Members | 2,404 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,398 software developers and data experts.

dynamically create radio buttons

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
2 13472
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: mortb | last post by:
I create a table containing radiobuttons in client script depending on what choices the user makes. It works fine the radio buttons appear *but* they are *not clickable*. Why? Is there a solution?...
1
by: Karthick Kumar | last post by:
Hi, I have the following code which displays all the images from a specific folder with a Radio button in it: Dim objFile i = 1 For Each objFile In objFolder.Files If (i = 1) Then...
4
by: Harry | last post by:
Hello, I have a page with a RadioButtonList and a PlaceHolder control. The RadioButtonList's AutoPostBack attribute is set to TRUE and its SelectedIndexChanged event loads one of three...
2
by: James P. | last post by:
Help, I need to display radio buttons on a form. The data is from SQL table: each row in each table is displayed as a radio button. I have multiple SQL tables so I understand I need to put...
2
by: epigram | last post by:
I'm dynamically creating a number of radio buttons on my aspx page based upon data read from a db. Each radio button has autopostback turned on. I'm experiencing two problems. 1) I am reading...
2
by: dougawells | last post by:
Hi- I'm wanting to have a set of radio buttons disabled when a form is displayed, then if they check another specific radio button, those would become enabled. I've tried setting it via...
7
by: moksha | last post by:
Hi, I am new to javascript and i am facing a problem in coding. plz help me out. I am using javascript for dynamically creating a table row which contains text boxes and radio...
1
by: castron | last post by:
Hi all, I'm reading user information from Active Directory. I'm allowing the users to search by username from a web form. There will be times when the result will be more than one record. What I'm...
5
by: satyabhaskar | last post by:
hi all, In my web page i have created radio buttons dynamically on to the page .....following is my code string Course, Semester, Section; int rowsCount; string con =...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.