Browsers mixing up name and id attributes

[wiglaf]

I just wasted 2 hours trying to figure out why my JavaScript was throwing an exception while calling function removeChild(). I started out innocently enough with the following html:

<span id="parent_id"><input type="whatever" id="foobar"></span>

And then proceeded to try and remove the input element from my document:

parent = document.getElementById('parent_id');
child = document.getElementById('foobar');
parent.removeChild(child);

And I went on my dandy way thinking that was all I had to do. In fact, it worked perfectly in Firefox. Surprisingly, though, both IE6 AND Opera 9.25 decided that the child element could not be found, and threw an exception. Very bothersome. I mean, all of my ids are unique, and foobar is most definitely a child of parent_id. So what's up?

Well, earlier in my html I had this:

<input type="whatever" name="foobar">

That is to say, this input element shared its NAME attribute with the other's ID attribute. Now maybe I haven't studied the JavaScript specs enough, but I really don't think this should have interfered with the above lines of JavaScript. It seems, however, that IE6 and Opera 9.25 think that a call to document.getElementById('foobar') returns this input element with name="foobar" instead of the correct input element with id="foobar". I was only able to fix this by changing the child id to something different than 'foobar' (or changing the name of the other input to something else).

So I write this as a documentation of an honest JavaScripter's troubles with retarded browser implementation of JavaScript.

Is this reproducible by anyone other than me?

Is this a known bug?

Or did I just screw up because I'm an idiot and never learned this 'feature'?

Thanks for reading this rant.

[Fotiman]

I believe this is a known bug. I knew that IE behaved this way, but I did not know Opera did as well.

[lavazza]

I have a vague recollection that's why I have been declaring id and name attributes in all form elements for so long i can't remember

Simple workaround:

<input type="whatever" id="foobar" name="foobar">

[wiglaf]

That's what I usually end up doing as well, but the page I've been working on generates multiple form elements with inputs that require non-unique name attributes across the different forms ('cause some of them submit to the same script).

So when assigning unique ids, I carelessly chose the scheme I describe above, and get that crappy side-effect.

[lavazza]

with inputs that require non-unique name attributes across the different forms ('cause some of them submit to the same script).

Via different 'submit buttons'? If so... how about passing the relevant parameters to a generic function?

[wiglaf]

I guess I shouldn't have said that the inputs "require" non-unique names, cause there are a multitude of things I could have changed to make this not the case. Thanks for the reply.