AJAX

Function to Create Radio Button

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2007

Posts: 39

Reputation: Tom Tolleson is an unknown quantity at this point

Solved Threads: 0

Tom Tolleson Tom Tolleson is offline

Offline

Light Poster

Function to Create Radio Button

Oct 10th, 2007

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.

 Help with Code Tags 
 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.

•

Join Date: Feb 2005

Posts: 1,181

Reputation: hollystyles will become famous soon enough

Solved Threads: 67

hollystyles hollystyles is offline

Offline

Veteran Poster

Re: Function to Create Radio Button

Oct 10th, 2007

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

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

==========================================
Yadda yadda yadda...
Web junky, fevered monkey

•

Join Date: Oct 2007

Posts: 39

Reputation: Tom Tolleson is an unknown quantity at this point

Solved Threads: 0

Tom Tolleson Tom Tolleson is offline

Offline

Light Poster

Re: Function to Create Radio Button

Oct 10th, 2007

•

Originally Posted by hollystyles

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

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.

•

Join Date: Feb 2005

Posts: 1,181

Reputation: hollystyles will become famous soon enough

Solved Threads: 67

hollystyles hollystyles is offline

Offline

Veteran Poster

Re: Function to Create Radio Button

Oct 10th, 2007

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.

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

You have this ?????

 Help with Code Tags 
 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.

==========================================
Yadda yadda yadda...
Web junky, fevered monkey

•

Join Date: Oct 2007

Posts: 39

Reputation: Tom Tolleson is an unknown quantity at this point

Solved Threads: 0

Tom Tolleson Tom Tolleson is offline

Offline

Light Poster

Re: Function to Create Radio Button

Oct 10th, 2007

Thanks! Unfortunately the code

 Help with Code Tags 
 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:

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

•

Join Date: Feb 2005

Posts: 1,181

Reputation: hollystyles will become famous soon enough

Solved Threads: 67

hollystyles hollystyles is offline

Offline

Veteran Poster

Re: Function to Create Radio Button

Oct 10th, 2007

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

 Help with Code Tags 
 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.

==========================================
Yadda yadda yadda...
Web junky, fevered monkey

•

Join Date: Nov 2009

Posts: 1

Reputation: uthumiram is an unknown quantity at this point

Solved Threads: 0

uthumiram

Offline

Newbie Poster

Radio connect

29 Days Ago

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; 29 Days Ago at 7:49 am. Reason: website snipped