«
»

IE has a problem with getElementsByName

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.

This entry was posted on Wednesday, October 3rd, 2007 and is filed under IE, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.


Get notification for future posts: follow me on Twitter or subscribe to my RSS feed

10 Responses to “IE has a problem with getElementsByName”

  1. Pablo Says:
    October 4th, 2007 at 8:11 am

    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. Steve Says:
    October 4th, 2007 at 10:29 am

    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. Steve Says:
    October 4th, 2007 at 10:31 am

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

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

  4. Stoyan Says:
    October 12th, 2007 at 4:14 pm

    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. Fred Says:
    October 15th, 2007 at 5:04 pm

    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. Stoyan Says:
    October 16th, 2007 at 1:22 am

    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. szako Says:
    April 12th, 2008 at 9:17 am

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

  8. KAmiloKlauss Says:
    July 9th, 2009 at 4:39 am

    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. tester Says:
    August 24th, 2009 at 2:35 am

    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. Rakesh chavan Says:
    May 21st, 2012 at 5:32 am

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

Leave a Reply