I have a button that activates a script to create a new radio button. I want the radio button to be of the class draggable. However, my code isn't quite working.

Any thoughts on this are appreciated.

<head>
		<script Language="JavaScript">

function modify(){
	var newElem= document.createElement("radio")
	newElem.id = "newradio"
	newElem.appendChild(newElem)
	document.body.appendChild(newElem)
	document.getElementById("emphasis1").childNodes[0].nodeValue = "first "
}
</script>	
	</head>
	<body>
<button onClick="modify()">Add a radio</button>

	</body>

Do you mean CSS class? If so setAttribute should work. I've not tested this.

newElem.setAttribute("class", "draggable")

Do you mean CSS class? If so setAttribute should work. I've not tested this.

newElem.setAttribute("class", "draggable")

That works (no errors returning)! Thanks.

However, it still doesn't create a radio button on the page. I'm kind of a newbie, and any advice is appreciated.

You have to append it to the DOM once you have created it. It's an input element so I assume you want it in a form? rather than appending to the body element.

document.forms[0].appendChild(newElem);

You have this ?????

newElem.appendChild(newElem)

I'm not sure what happens when you append an element to itself.

Also I think document.createElement("radio") should be document.createElement("input") then set it's type to radio newElem.type = "radio"

Thanks! Unfortunately the code

var newElem= document.createElement("input")
	newElem.type = "radio"

Creates a null when the code attempts the append child method:

document.forms[0].appendChild(newElem);

Hmmm I've had a go myself. This is what I got:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
var radioNum = 1;

function addRadio()
        {
            var radio = document.createElement("input");
            radio.id = "radio" + radioNum; //Gotta love that loosley typed implicit conversion!!!!
            radio.setAttribute("type", "radio");
            radio.setAttribute("name", "radios");
            radio.value = "myvalue";
            //radio.setAttribute("onclick", function(){alert(this.value);});
            document.getElementById("divRadiolist").appendChild(radio);
            radioNum++;
        }

    </script>
</head>
<body>
    <form id="form1" method="POST" action="#">
    
        <input type="button" id="btnAddRadio" value="Add radio" onclick="addRadio();" />
        <div id="divRadiolist"></div>
    </div>
    </form>
</body>
</html>

It works great in Firefox, but in IE7 when I click a radio button it doesn't stay selected!

Anyone got any ideas?

hi
i am prabhu
i start one site <website snipped>
i wnt one help , how connect radio to my site .
i have ip add. i want java code.
thank you
by
tamilofun team

Edited 7 Years Ago by nav33n: website snipped

This article has been dead for over six months. Start a new discussion instead.