document.getElementsByName returns elements more than expected

Question

I have a RadioButtonList

<asp:radiobuttonlist runat="server" id="rblList">
    <asp:listitem>s1</asp:listitem>
    <asp:listitem>s2</asp:listitem>
    <asp:listitem>s3</asp:listitem>
    <asp:listitem>s4</asp:listitem>
</asp:radiobuttonlist>

In my client code I'm grabbing the array of radio buttons like this

var elements = document.getElementsByName("rblList");

Why am I getting 5 items instead of 4? It makes elements like a 1 based array.

Answer 1

Try looking at the HTML created by the code (i.e. "view source"). It may be that the element does not have the name rblList, but rather the id. In that case, I recommend using getElementsByID.

Answer 2

you have a runat="server" in your code and many asp-tags... This means that your code example is server side code which will be replaced with html before sending to the client.

Check out yout html and you'll find the reason!

... and check for the "name" attribute... getElementsByName returns all elements with a specific "name" attribute. There can be several.

If you want to select by ID (unique) it is getElementByID (without the plural 's' of Elements).

Answer 3

My guess would be that you have another element on the page with the name rblList. Using the following test:

   <asp:RadioButtonList ID="RadioButtonList1" runat="server">
        <asp:ListItem>S1</asp:ListItem>
        <asp:ListItem>S2</asp:ListItem>
        <asp:ListItem>S3</asp:ListItem>
        <asp:ListItem>S4</asp:ListItem>
    </asp:RadioButtonList>

    <script type="text/javascript">
        function test() {
            var foo = document.getElementsByName('<%=this.RadioButtonList1.UniqueID %>');
            alert(foo.length);
            return true;
        }
    </script>

I get four elements.

Answer 4

Ok so the RadioButtonList produces the following HTML

<table id="rblList" border="0">
    <tr>
        <td><input id="rblList_0" type="radio" name="rblList" value="s1" /><label for="rblList_0">s1</label></td>
    </tr>
    <tr>
        <td><input id="rblList_1" type="radio" name="rblList" value="s2" /><label for="rblList_1">s2</label></td>
    </tr>
    <tr>
        <td><input id="rblList_2" type="radio" name="rblList" value="s3" /><label for="rblList_2">s3</label></td>
    </tr>
    <tr>
        <td><input id="rblList_3" type="radio" name="rblList" value="s4" /><label for="rblList_3">s4</label></td>
    </tr>
</table>

According to MSDN I'm getting 5 elements because I'm getting the radio buttons AND the table that ASP.Net it putting them in:

http://msdn.microsoft.com/en-us/library/ms536438%28VS.85%29.aspx

When you use the getElementsByName method, all elements in the document that have the specified NAME attribute or ID attribute value are returned.

So, putting this bit of javaScript on the page:

function showEle() {
    var elements = document.getElementsByName("rblList");

    alert("elements length=" + elements.length);

    for (var i = 0; i < elements.length; i++) {
        try {
            alert("elements[" + i + "]" + ", id=" + elements[i].id + ", name=" + elements[i].name + ", value = " + elements[i].value);
        }
        catch (ex) {
            alert("error reading elements[" + i + "].value");
        }
    }
}

I was able to see this...

elements[0], id=rblList, name=undefined, value = undefined
elements[1], id=rblList_0, name=rblList, value = s1
elements[2], id=rblList_1, name=rblList, value = s2
elements[3], id=rblList_2, name=rblList, value = s3
elements[4], id=rblList_3, name=rblList, value = s4

element[0] is the table, the others are the radio buttons