473,785 Members | 2,261 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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(){
componentMainTa ble = document.getEle mentById("mycom ponent");
componentTable = document.create Element("table" );
componentBody = document.create Element("tbody" );
componentMainTa ble.setAttribut e("width","100" );

//row and table information is created here
row1 = document.create Element("tr");
tab1 = document.create Element("td");
tab1.setAttribu te("width", "33%");
tab1.setAttribu te("align", "center");
field1 = document.create Element("input" );
field1.setAttri bute("type","ra dio");
field1.setAttri bute("name","on e");
field1.setAttri bute("value", 1);
tab2 = document.create Element("td");
tab2.setAttribu te("width", "33%");
tab2.setAttribu te("align", "center");
field2 = document.create Element("input" );
field2.setAttri bute("type","ra dio");
field2.setAttri bute("name","on e");
field2.setAttri bute("value",2) ;
tab1.appendChil d(field1);
tab2.appendChil d(field2);
row1.appendChil d(tab1);
row1.appendChil d(tab2);
componentBody.a ppendChild(row1 );
componentTable. appendChild(com ponentBody);
componentMainTa ble.appendChild (componentTable );
field1.setAttri bute("checked", "checked");

}

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

Jul 23 '05 #1
2 13529
ob*******@hotma il.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(){
componentMainTa ble = document.getEle mentById("mycom ponent");
componentTable = document.create Element("table" );
componentBody = document.create Element("tbody" );
componentMainTa ble.setAttribut e("width","100" );
Setting style attributes is better done directly using the style
object:

componentMainTa ble.style.width = "100";

//row and table information is created here
row1 = document.create Element("tr");
tab1 = document.create Element("td");
tab1.setAttribu te("width", "33%");
tab1.setAttribu te("align", "center");
The same here:

tab1.style.widt h = "33%";
tab1.style.text Align = "center";
field1 = document.create Element("input" );
field1.setAttri bute("type","ra dio");
field1.setAttri bute("name","on e");
field1.setAttri bute("value", 1);
Element attributes can be set directly:

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

[...] field1.setAttri bute("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.getEle mentById("mycom ponent");

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

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

theSub = document.create Element("input" );
theSub.type = "submit";

theForm = document.create Element("form") ;
theForm.action = "";
theForm.appendC hild(field1);
theForm.appendC hild(field2);
theForm.appendC hild(theSub);
theSpot.appendC hild(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*******@hotma il.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.getEle mentById("mycom ponent");

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

theSpot.innerHT ML = 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
2095
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? I'm using IE 6.0 cheers, mortb actual code included (cut from a larger page):
1
3325
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 Response.Write("<TR>")
4
3119
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 UserControls into the PlaceHolder's child control collection depending upon which of the three radio buttons is selected. Each of the three UserControls have postback events themselves triggered by button clicks. The problem I'm having is keeping track of...
2
11982
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 them each in a GroupBox. All the examples I saw from the books or from the web show me how to add static radio buttons at design, or dynamically at run time but with fixed radio buttons (like from an array). I need to create radio buttons based...
2
1697
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 the db, creating the radio buttons, and setting the checked property (also based upon data in the db) in Page_Load regardless of whether a postback is occurring or not. The page loads and displays correctly each time unless the database is updated...
2
6317
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 window.document.formname.radiogroup.disabled="true"; (or false) - but that doesn't seem to work. I've seen this done with text boxes, but not with radio buttons. Can anyone give any help? Thanks
7
4875
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 buttons and check box. I am adding two radio buttons once for a row.Now my problem is the radio buttons in all the rows that added dynamically are behaving as same group i.e when i am selecting a radio button in second row,radio button in first row...
1
7541
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 trying to do is to generate radio buttons at run-time, so users can select the user account they are looking for, and then populate the information into a form. My question is how do I create a single event handler for more than one radio...
5
6705
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 = ConfigurationManager.ConnectionStrings.ConnectionString; protected void Page_Load(object sender, EventArgs e) { try
0
9646
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10157
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10097
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9957
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
6742
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5386
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4055
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3658
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2887
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.