How to create a RADIO button using DOM

DU · Jul 20 '05, 10:30 AM

Re: How to create a RADIO button using DOM

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:

IIS 7.5 Detailed Error - 404.0 - Not Found

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

IIS 7.5 Detailed Error - 404.0 - Not Found

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>Dynamica lly 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.getEle mentById("idDiv ");
for (var i=0; i < arrData.length; i++)
{
var objRadItem = document.create Element("input" );
objRadItem.type = "radio";
objRadItem.name = "radGroup";
objRadItem.id = "idrad_" + i;
objRadItem.valu e = arrData[i][0];

if(i == 1) {objRadItem.def aultChecked = true; objRadItem.chec ked = true; };

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

var objLabel = document.create Element("label" );
objLabel.htmlFo r = objRadItem.id;
objLabel.append Child(objRadIte m);
objLabel.append Child(objTextNo de);

var objBreak = document.create Element("br");

objDiv.appendCh ild(objLabel);
objDiv.appendCh ild(objBreak);
};
document.forms["FirstFormN ame"].cmdAdd.disable d = true;
}
</script>
</head>

<body>

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

<form name="SecondFor mName" action="">
<div id="idDiv"></div>
</form>

</body></html>

How to create a RADIO button using DOM

How to create a RADIO button using DOM

Comment