Raghuram Banda wrote:[color=blue]
> Hi,
>
> Can any one help me, how to create a Radio button using DOM with default
> one option is selected
>
> Thanks in advance
>[/color]
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>
