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

How to create a RADIO button using DOM

P: n/a
Hi,

Can any one help me, how to create a Radio button using DOM with default
one option is selected

Thanks in advance

Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
DU
Raghuram Banda wrote:
Hi,

Can any one help me, how to create a Radio button using DOM with default
one option is selected

Thanks in advance


The following compliant, validated and tested code will work flawlessly,
impeccably in Opera 7.20, NS 7.1 and Mozilla 1.5b. MSIE 6 for windows
will create the radio buttons and labels but checking the radio buttons
won't work: this is due to a current DOM-tree-modification limitation in
that browser.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunc...e7Section.html

------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Dynamically created radio buttons</title>

<style type="text/css">
body {margin:16px; color:black; background-color:white;}
</style>

<script type="text/javascript">
var arrData = [["0", "Man"],["1", "Woman"],["2", "Monkey"]];
function addGroup3Radio()
{
var objDiv = document.getElementById("idDiv");
for (var i=0; i < arrData.length; i++)
{
var objRadItem = document.createElement("input");
objRadItem.type = "radio";
objRadItem.name = "radGroup";
objRadItem.id = "idrad_" + i;
objRadItem.value = arrData[i][0];

if(i == 1) {objRadItem.defaultChecked = true; objRadItem.checked = true; };

var objTextNode = document.createTextNode(" " + arrData[i][1]);

var objLabel = document.createElement("label");
objLabel.htmlFor = objRadItem.id;
objLabel.appendChild(objRadItem);
objLabel.appendChild(objTextNode);

var objBreak = document.createElement("br");

objDiv.appendChild(objLabel);
objDiv.appendChild(objBreak);
};
document.forms["FirstFormName"].cmdAdd.disabled = true;
}
</script>
</head>

<body>

<form name="FirstFormName" action="">
<p>
<input type="button" name="cmdAdd" value="Add a group of 3 radio
buttons" onclick="addGroup3Radio();">
</p>
</form>

<form name="SecondFormName" action="">
<div id="idDiv"></div>
</form>

</body></html>

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.