Member Avatar for Tom Tolleson

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>
  • 3 Contributors
  • 6 Replies
  • 435 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by uthumiram
Member Avatar for hollystyles

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

newElem.setAttribute("class", "draggable")
Member Avatar for Tom Tolleson

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.

Member Avatar for hollystyles

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"

Member Avatar for Tom Tolleson

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);
Member Avatar for hollystyles

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?

Member Avatar for uthumiram

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 by nav33n because: website snipped
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.