this.id is empty for asp:CheckBox

Question

I have an asp:CheckBox with the following tag:

<asp:CheckBox ID="cbTest1" runat="server" onchange="cbChange(this.id);"/>

cbChange is a Javascript function in the <head> that looks like this (it's simple for now):

<script type="text/javascript">

    function cbChange(senderID) {
        alert('|' + senderID + '|'); // '|' is to help see string length
        return false;
    }

</script>

Now, whenever I click on cbTest1, I get the alert box with the following text:

||

In other words, it's an empty/null string. I should also note that when I use a more traditional <input> that I get the expected results:

(Code for <input>)

<input type="checkbox" name="cbtest2" id="cbtest2" onchange="cbChange(this.id);" />

(Text in alert box when I check cbtest2)

|cbtest2|

Why would I be getting the null/empty string with the asp:Checkbox, but expected behaviour with the <input>?

EDIT I did a little bit more research, since the asp:CheckBox has the ID attribute instead of (lowercase) id, so I tried onchange="cbChange(this.ID);". Now I get the following output in the alert box:

|undefined|

Why would this also be happening?

take a look at html source of the page in the browser and search for "cbTest" - what element has it as [part of] its `id` attribute value? — Igor, Jul 10 '13 at 15:47
`ID` is a server-side property of a `Control` - it contributes to client-side `id` attribute, but does not exist on the client, that's why you get `undefined` — Igor, Jul 10 '13 at 15:49

tymeJV · Accepted Answer · 2013-07-10T16:14:51.530

1

Pull up your rendered page source, you'll see the ASP actually renders this as:

<span onchange="cbChange(this.id);"><input id="ContentArea_cbTest" type="checkbox" name="ctl00$ContentArea$cbTest" /></span>

Your input element is actually nested with a span element.

Using Pure JS, you can still get the ID of your input by doing:

<asp:CheckBox ID="cbTest" runat="server" onchange="cbChange(this.childNodes[0].id);"/>

edited Jul 10 '13 at 16:14

answered Jul 10 '13 at 15:50

tymeJV

103,943
14
161
157

I did just notice that thanks to @Igor. So is it trying to get the id of the `span` instead? And since the span has no id, I'm guessing that's why the output isn't what I expect – wlyles Jul 10 '13 at 15:53
Yup, exactly why. I've updated my answer and included the code to get the ID of the child input. – tymeJV Jul 10 '13 at 16:15
thanks, that works nicely. I can now get the expected id. It is strange that the `onchange` method gets put into the `span` though – wlyles Jul 10 '13 at 17:26

score 1 · Answer 2 · answered Jul 10 '13 at 15:52

1

If you view source, you'll see:

<span onchange="cbChange(this.id);">
    <input id="cbTest" type="checkbox" name="cbTest" />
</span>

One of the downsides of WebForms - the markup doesn't always come as you'd expect.

Your best bet is to hook up the event manually on the client. If you happen to be using jQuery, you can do:

jQuery(document).ready(function() {
    jQuery("#<%= cbTest.ClientID %>").click(function() {
        cbChange(jQuery(this).attr("id"));
    });
});

(If you're not using jQuery, do the same thing, just hook up to the click event manually using regular javascript - I always have to look up that syntax though...)

answered Jul 10 '13 at 15:52

Joe Enos

39,478
11
80
136

I think what I'll end up doing is just use an `input` instead, but thank you for the help – wlyles Jul 10 '13 at 16:08
@Joe -- `this.childNodes[0].id` should do the trick for Pure JS :) – tymeJV Jul 10 '13 at 16:15
@tymeJV Getting the id isn't an issue, it's the event. I believe `document.getElementById("someid").onclick = function () { alert(this.id); };` works for all browsers, but I think there's a "more correct" way. [This answer](http://stackoverflow.com/a/6348597/111266) shows why I just use jQuery so I don't have to think about it. – Joe Enos Jul 10 '13 at 16:26

this.id is empty for asp:CheckBox

2 Answers2