472,993 Members | 2,366 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,993 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 13428
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: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
3
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
4
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...
3
SueHopson
by: SueHopson | last post by:
Hi All, I'm trying to create a single code (run off a button that calls the Private Sub) for our parts list report that will allow the user to filter by either/both PartVendor and PartType. On...

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.