IE has a problem with getElementsByName

October 3rd, 2007. Tagged: IE, JavaScript

Yes, it does.

Sometimes it's convenient to use "HTML arrays", meaning to name fields like:
<input name="something[]" />

Then on the server side you loop through the array $_POST['something']

This allows for a flexibility where your app doesn't know the number of inputs in advance, but works fine regardless of the actual number.

Even cooler is that you can generate fields on the client-side, with JavaScript.

The problem is if you want to do some sort of client-side validation after you've generated fields on the fly. If you have:

<input name="something[]" />
<input name="something[]" />
<input name="something[]" />

Then you can access the fields using

document.getElementsByName('something[]')

So in the case above

document.getElementsByName('something[]').length

will give you 3.

Then you add another fields, for example like:

var new_input = document.createElement('input');
new_input.type = 'text';
new_input.name = 'something[]';
document.body.appendChild(new_input);

Now if you try to count the fields with

document.getElementsByName('something[]').length

you'll get 4 in Firefox as you would expect, but still 3 in IE.

Bugs happen, c'est la vie :D

Here's a demo

Tested IE7 only, don't know if the bug exists in earlier versions.

My example was with an HTML array using []s in field names, but the issue remains if you have regular names without brackets, for example you have radio buttons or checkboxes and you want to create more choices dynamically with JavaScript.

Tell your friends about this post: Facebook, Twitter, Google+

10 Responses

  1. Happened with IE6 (6.0.29002180.xpsp2_qfe.070227-2300) aswell, but if you add the inputs via innerHTML, it works on IE… strange behaviour… any ideas why?

  2. You’ve (re)discovered the wonderful buggyness of IE.

    Documented here: http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

    In IE6/IE7 you *CANNOT* set the name attribute of a freshly created DOM element. (you’ll find issues with the type attribute too, but not quite the same)

    You need to do the following… and yes, it is *VERY* ugly!

    var new_input = document.createElement(”);

    Of course, this will also blow up in any real browser that supports the DOM, so you’ll need to do some browser sniffing or something to apply this…

    PS on the type thing… you can set it, but as soon as you append it to the DOM, its fixed… you can’t change it to a radio, checkbox, password, file,.. etc.

  3. Doh!… got to escape those brackets ;-) it should be:

    var new_input = document.createElement(‘<input name=”something[]“/>’);

  4. Thanks Steve, I didn’t know this use of createElement was even possible! Looks so wrong.

    BTW, I also noticed that in IE when you clone an element that has onclick attribute for example, the new element doesn’t raise the onclick event! Not that anyone should use onclick attributes instead of attaching events, but still…

  5. Are you sure this is a IE specific bug ? I have the same behavior with Safari and Opera. In fact the only browser who work the way you describe is FireFox.

  6. Hey Fred, just tried Opera and Safari, they worked as expected (like Firefox).

    When you hit the demo page I did and then click “add” and then “count”, both Safari and Opera show the correct number of elements.

    Seems to be IE-only bug

  7. Thanks for the post, I have just discovered the same under ie7, now trying to find some workaround …

  8. Stoyan i have issues with the “onclick” event you need to do some other ugly thing:

    input1=document.createElement(“input”);
    input1.setAttribute(“type”, “checkbox”);
    input1.setAttribute(“onclick”, “optionListInterest()”);
    div.appendChild(input1);
    input1.parentNode.innerHTML=input1.parentNode.innerHTML;

    Ugly, but worked for me.

  9. this bug is fixed in version:
    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.13) Gecko/2009073022 Firefox/3.0.13 (.NET CLR 3.5.30729)

  10. IN IE7 doen’t work… if you create new element the count will be same as 3

Leave a Reply