Problem with dynamically rendered radio buttons

daddyunit · January 11th, 2006, 03:05 PM

I'm trying to dynamically render radio buttons. Here is my test code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
    function writeRadio () {

        var sp = document.getElementById("filterRow");
        sp.appendChild(document.createTextNode("Pick me "));

        var input = document.createElement("input");
        input.type="radio";
        input.name ="myradiobutton";
        input.defaultValue = "value1"

        sp.appendChild(input);
        sp.appendChild(document.createTextNode(" or me "));

        input = document.createElement("input");
        input.type="radio";
        input.name ="myradiobutton";
        input.value = "value2";

        sp.appendChild(input);
    }
</script>
</head>

<body onLoad="writeRadio();">
<form name="bob">
<p id="filterRow"></p>
</form>
</body>
</html>

When rendered on the page, the radio buttons work fine in mozilla (Firefox) but will not select when clicked in Internet Explorer.

Any ideas would be greatly appreciated!

vinod_yadav1919 · January 19th, 2006, 04:41 AM

Hii Daddyunit!!
Solution is below
I have checked this code in IE,working fine.
Let me know if not working in FireFox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
    function writeRadio () {

        var sp = document.getElementById("filterRow");
        sp.appendChild(document.createTextNode("Pick me1 "));

        var input = document.createElement("input");
        input.type="radio";
        input.name ="myradiobutton";
        input.defaultValue = "value1"
        input.id ="myradiobutton";
        input.onclick = function() { enableRadio('1') };

        sp.appendChild(input);
        sp.appendChild(document.createTextNode(" or me2 "));

        input = document.createElement("input");
        input.type="radio";
        input.name ="myradiobutton";
        input.id ="myradiobutton";
        input.value = "value2";
        input.onclick = function() { enableRadio('2') };
        sp.appendChild(input);

    sp.appendChild(document.createTextNode(" or me3 "));

        input = document.createElement("input");
        input.type="radio";
        input.name ="myradiobutton";
        input.id ="myradiobutton";
        input.value = "value2";
        input.onclick = function() { enableRadio('3') };
        sp.appendChild(input);
    }

function enableRadio(objlocation)
{

disableAllRadio();

var sp = eval('document.bob.myradiobutton');
sp[objlocation-1].checked=true

}

function disableAllRadio()
{
var sp = eval('document.bob.myradiobutton');

for(i=0;i<=sp.length-1;i++)
{
sp[i].checked=false
}

}
</script>
</head>

<body onLoad="writeRadio();">
<form name="bob">
<p id="filterRow"></p>
</form>
</body>
</html>

Hope this will help you

Cheers :)

vinod