Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 15959

Oct 10th, 2007

Function to Create Radio Button

Expand Post »

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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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>

Last edited by Tom Tolleson; Oct 10th, 2007 at 11:51 am.

Similar Threads

How to retrieve data from a dynamically generated radio button in ASP.NET
radio button in ASP.NET
retrieving ids from dynamically created controls in asp.net in ASP
Want to use radio button or menu bar instead of combo box in Java
Am not able to get a radio button selection to display in output in PHP

Tom Tolleson

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

39 posts
since Oct 2007

Permalink

Oct 10th, 2007

Re: Function to Create Radio Button

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
newElem.setAttribute("class", "draggable")
newElem.setAttribute("class", "draggable")

hollystyles

Reputation Points: 262

Solved Threads: 68

Veteran Poster

Offline

1,181 posts
since Feb 2005

Permalink

Oct 10th, 2007

Re: Function to Create Radio Button

Click to Expand / Collapse Quote originally posted by hollystyles ...

Do you mean CSS class? If so setAttribute should work. I've not tested this.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
newElem.setAttribute("class", "draggable")
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

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

39 posts
since Oct 2007

Permalink

Oct 10th, 2007

Re: Function to Create Radio Button

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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
document.forms[0].appendChild(newElem);
document.forms[0].appendChild(newElem);

You have this ?????

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
newElem.appendChild(newElem)
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"

Last edited by hollystyles; Oct 10th, 2007 at 1:03 pm.

hollystyles

Reputation Points: 262

Solved Threads: 68

Veteran Poster

Offline

1,181 posts
since Feb 2005

Permalink

Oct 10th, 2007

Re: Function to Create Radio Button

Thanks! Unfortunately the code

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
	var newElem= document.createElement("input")
	newElem.type = "radio"
	var newElem= document.createElement("input")
	newElem.type = "radio"

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
	document.forms[0].appendChild(newElem);
	document.forms[0].appendChild(newElem);

Tom Tolleson

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

39 posts
since Oct 2007

Permalink

Oct 10th, 2007

Re: Function to Create Radio Button

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!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>
<!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?

Last edited by hollystyles; Oct 10th, 2007 at 1:47 pm.

hollystyles

Reputation Points: 262

Solved Threads: 68

Veteran Poster

Offline

1,181 posts
since Feb 2005

Permalink

Nov 20th, 2009

Radio connect

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

Last edited by nav33n; Nov 20th, 2009 at 7:49 am. Reason: website snipped

uthumiram

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Nov 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Light Box Not Working.

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Are jquery pagination are reliable with large data

DaniWeb Message

Cancel Changes

User Name
Password