Function to Create Radio Button

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>

Tom Tolleson

Light Poster

39 posts since Oct 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

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

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

hollystyles

Veteran Poster

1,182 posts since Feb 2005

Reputation Points: 262

Solved Threads: 68

4 Years Ago

0

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.

Tom Tolleson

Light Poster

39 posts since Oct 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

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"

hollystyles

Veteran Poster

1,182 posts since Feb 2005

Reputation Points: 262

Solved Threads: 68

4 Years Ago

0

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);

Tom Tolleson

Light Poster

39 posts since Oct 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

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?

hollystyles

Veteran Poster

1,182 posts since Feb 2005

Reputation Points: 262

Solved Threads: 68

2 Years Ago

0

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

uthumiram

Newbie Poster

1 post since Nov 2009

Reputation Points: 10

Solved Threads: 0

Function to Create Radio Button

This article has been dead for over three months