Creating & cloning RADIO buttons problem

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Manuel Vázquez - 04 Mar 2005 17:01 GMT

Hi all,
I'm facing a problem when creating or cloning RADIO items. My current script
and html is rather large, so I'm showing just a reproducible sample.

Save the following and try it in IE:
<html>
<script>
function ReassignIds(node, append)
{
if (node.id != null)
node.id += "_"+append;
if (node.name != null)
node.name += "_"+append;

if(node.hasChildNodes())
{
for(var i=0; i<node.childNodes.length; i++)
{
if (node.childNodes.item(i).nodeType == 1)
ReassignIds(node.childNodes.item(i), append);
}
}
}

function test()
{
var ClassNode = document.getElementById("Class");
var NewClassNode = ClassNode.cloneNode(true);
ReassignIds(NewClassNode,"NewClassNode");

var FromHere = document.getElementById("FromHere");
FromHere.appendChild(NewClassNode);
}
</script>

<body onLoad="test()">
<P id="ClassMark">Class</P>
<table id="Class"><tr><td><input id="IYes" name="Marker" type="radio"
value="1">yes</td></tr>
<tr><td><input id="INo" name="Marker" type="radio"
value="0">no</td></tr></table>
<P id="FromHere">From Here</P>
</body>
</html>

---

As you can see, I'm reassing the names of the created radio items, but IE
keeps the four of them as single group, allowing the user to select just one
of the four and not one of each group (i.e two of them).

Any ideas?

regards,
manuel.

Reply to this Message

Joe Fawcett - 04 Mar 2005 17:16 GMT

> Hi all,
> I'm facing a problem when creating or cloning RADIO items. My current
[quoted text clipped - 53 lines]
> regards,
> manuel.

You can't alter the name of an input after creation, well you can but IE
ignores the new name.
You need to create like this:
var oInput = document.createElement("<input name=\"" + sname + "\" +
type=\"" + sType + "\">");

So in your scenario you need to remove the node and replace with a fresh one
that mimics the old attributes.

Signature

Joe (MVP).

Reply to this Message

Manuel Vázquez - 04 Mar 2005 18:05 GMT

Thanks, I think I will use that work-around in my work.

However, my orginal code does the same for selects, checkboxes and textboxes
and all of them reflects the change as expected (i.e. posting the value when
submitting the form), so, I think this is strongly related to radio items.

Thanks again,
Manuel.

> > Hi all,
> > I'm facing a problem when creating or cloning RADIO items. My current
[quoted text clipped - 61 lines]
> So in your scenario you need to remove the node and replace with a fresh one
> that mimics the old attributes.

Reply to this Message

Manuel Vázquez - 04 Mar 2005 18:39 GMT

Oops, it didn't work as expected. :(

Here's the script with changes:
function ReassignIds(node, append)
{
if (node.tagName == "INPUT" && node.type == "radio")
{
var r = document.createElement("INPUT");
r.type = node.type;
r.id = node.id+"_"+append;
r.name = node.name+"_"+append;
r.value = node.value;

var p = node.parentNode;
p.replaceNode(node, r);
return;
}

if (node.id != null)
node.id += "_"+append;
if (node.name != null)
node.name += "_"+append;

if(node.hasChildNodes())
{
for(var i=0; i<node.childNodes.length; i++)
{
if (node.childNodes.item(i).nodeType == 1)
ReassignIds(node.childNodes.item(i), append);
}
}
}

The actual result is that the junt created radio button doesn't show up.

Manuel.

Reply to this Message

Manuel Vázquez - 05 Mar 2005 06:09 GMT

As I said in my last post the suggested patch didn't work.
The only way I've found to work this around is to use outerHTML, i.e:

var newTag = "<input type='radio' .........>";
node.outerHTML = newTag;

Regards,
Manuel.

Reply to this Message

Rich - 07 Nov 2005 08:27 GMT

Hi Manuel,

I was checking out your javascript code. Pretty slick, but like you, when I
added it to an htm file I got 4 radio button but for only one group using
...
var r = "<input name=\"" + node.name + "\" + type=\"" + node.type + "\">";
node.outerHTML = r;
...
and also your original code and the suggested code (which did not clone).
The only way I was able to get separate groups of radio buttons was to use
two separate forms. Your way is much more sophisticated. Were you able to
solve your problem? May I ask what the javascript looks like?

Thanks,
Rich

> As I said in my last post the suggested patch didn't work.
> The only way I've found to work this around is to use outerHTML, i.e:
[quoted text clipped - 70 lines]
> > So in your scenario you need to remove the node and replace with a fresh one
> > that mimics the old attributes.

Reply to this Message

Webmaster Forum / Browsers / Internet Explorer / November 2005

Creating & cloning RADIO buttons problem