CODEWITHSUNDEEP
javascriptasp.nethtml
Homer
Homer

Reputation: 7826

document.getElementsByName returns more elements than expected

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.

Upvotes: 0

Views: 2796

Answers (4)

Homer
Homer

Reputation: 7826

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

Upvotes: 1

Thomas
Thomas

Reputation: 64664

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.

Upvotes: 2

rdmueller
rdmueller

Reputation: 11052

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).

Upvotes: 0

Traveling Tech Guy
Traveling Tech Guy

Reputation: 27849

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.

Upvotes: 0

Related Questions