...

View Full Version : Appending Newly Created Radio Button Does Not Work?



JohnKrutsch
07-07-2004, 12:59 AM
Consider this code:



<script type=text/javascript>
<!--//
function addRadio(frm){
var r=document.createElement('input');
r.setAttribute("type","radio");
r.setAttribute("value","r_value");
r.setAttribute("name","r1");
r.setAttribute("onclick","alert(this.name)");
frm.appendChild(r);
}
//-->
</script>

<form>
<input type="button" onclick="addRadio(this.form)" value="add radio" />
</form>


The new radio button will appear but it is not selectable. The page will properly report that it is a member of the forms collection. When checking to see if the page is aware of the name, value, and other attributes it responds properly. When viewing the generated source code it shows the following:




<INPUT onclick=alert(this.name) type=radio value=r_value>


What is more curious is that the name attribute does not show up on the generated source code but If I were to ask the page for the name of the 2nd form element it would properly respond "r1"

Any ideas to what is going on? How can I make it so the radio button is selectable?

Willy Duitt
07-07-2004, 04:36 AM
I haven't played much with setAttribute but you can attach your function call by directly accessing the onlick event.

This will make it work: r.onclick = new Function("alert(this.name)");

......Willy

JohnKrutsch
07-07-2004, 06:41 AM
Yes that gets the onclick working BUT I still cannot actually select the radio button, it won't check.

glenngv
07-07-2004, 07:41 AM
When you use the DOM method to create new elements in IE, name attribute is not recognized. Also in IE, radio button without name attribute is not selectable. Blame that to IE's "faulty" behavior. Try your code in Moz and it will work.

Willy Duitt
07-07-2004, 07:43 AM
Oh, I see said the blind man....

Try this:


<script type=text/javascript>
<!--//
function addRadio(frm){
var r=document.createElement('input');
r.type = "radio";
r.value = "r_value";
r.name = "r1";
r.onclick = function(){this.checked = true};
frm.appendChild(r);
}
//-->
</script>

<form action="http://google.com" method="get">
<input type="submit" value="Test">
<input type="button" onclick="addRadio(this.form)" value="add radio" />
<input type="radio" name="r1" value="r_Origvalue" />
</form>


Sorry, I converted it to direct assignment which I am more used too while testing. You will need to convert back to getters/setters but it should work either way....

......Willy

Edit: I tested the above in IE6 and using this method the radio is checkable and the name and value pass on the form.....

JohnKrutsch
07-07-2004, 07:53 AM
I tried that earlier and while it lets me select a radio button it lets me select as many of them as I want defeating the purpose of having a radio button in the first place.

Sounds like what glenngv says is exactly why I having this problem. Does ant one know of any work arounds?

neofibril
07-07-2004, 08:07 AM
NAME Attribute | name Property (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/name_2.asp)


The NAME attribute cannot be set at run time on elements dynamically created with the createElement method. To create an element with a name attribute, include the attribute and value when using the createElement method.

Examples

The following example shows how to set the NAME attribute on a dynamically created A element.

var oAnchor = document.createElement("<A NAME='AnchorName'></A>");

JohnKrutsch
07-07-2004, 08:47 AM
Ok, so this seems to work in IE6 and mozilla does anyone see any problems with it?




<script type=text/javascript>
<!--//
var idx=0;
function addRadio(frm){
var r=document.createElement(document.all?'<input name="r">':'input');
r.setAttribute("type","radio");
r.setAttribute("value","r_"+idx);
r.setAttribute("name","r");
r.onclick = function(){alert(this.value)};
frm.appendChild(r);
idx++;
}
//-->
</script>

<form>
<input type="button" onclick="addRadio(this.form)" value="add radio" />
</form>

glenngv
07-07-2004, 09:27 AM
Checking for document.all is not sufficient for IE as Opera and Konqueror browsers can be spoofed as IE. AFAIK, those 2 browsers allow the name attribute to be set with createElement method just like what Moz does.

neofibril
07-07-2004, 09:44 AM
document.uniqueID should single out I.E.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum