Raghuram said:
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/doctorunclear/Netscape7/Netscape7Section.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
[0];
if(i == 1) {objRadItem.defaultChecked = true; objRadItem.checked = true; };
var objTextNode = document.createTextNode(" " + arrData[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>