Fetch ASP.NET label control through JavaScript the right way?

Question

Hello fellows, Good day. I am trying to fetch an asp.net label control's text value using javascript. However the control id is returned as null when I use

var a = document.getElementById('<%= lblTreatyNo.ClientID %>').innerText;

However it does work when I use the full name from source like

var a = document.getElementById('ctl00_ContentPlaceHolder1_lblTreatyNo').innerText;

I am using master pages in my site design. I want to know the correct way of fetching this. Isn't there a way not to use the full name from the source file?

Update here is my code sample

<asp:Label ID="lblTreatyNo" runat="server"></asp:Label>    
<asp:Button ID="btnNewSec" runat="server" OnClientClick="javascript:void(window.open ('ft_newsec.aspx?ftid='+document.getElementById('ctl00_ContentPlaceHolder1_lblTreatyNo').innerHTML+'',null,'height=220,width=300,resizable=yes,status=no,toolbar=no,menubar=no,location=no,scrollbars=yes')); return false;" Text="Add New Company" CausesValidation="False" Width="155px" />

Answer 1

You may remove the asp short tags:

From:

var a= document.getElementById('<%=ctl00_ContentPlaceHolder1_lblTreatyNo %>').innerText;

To:

var a= document.getElementById('ctl00_ContentPlaceHolder1_lblTreatyNo').innerText;

Answer 2

The only problem that I can see is that you're trying to get the element before the DOM is loaded. An actual scenario would be if the asp:Label is defined after the JavaScript code; by the time the JavaScript code is executed, the element you're trying to get is not known, and document.getElementById will return null. But then again, the second approach shouldn't work neither in this case. We'd need to know more about the context to help you, i.e. the code where both the asp:Label and the JavaScript code are defined; it looks like something else might be wrong.

Regarding your question at the end, using the ClientID property is the right way to do it, since ClientID will be the value of the element's id attribute (HTML).

Update, in regard to Popo's newly posted code

lblTreatyNo.ClientID in the OnClientClick property (in the ASPX source) isn't rendered; if you have a look at the source code of the rendered page, you'll see something like the following:

onclick="<%= lblTreatyNo.ClientID %>

No server-side code should be put in the OnClientClick when defined in an ASPX page, since the property's value won't be rendered. You can imagine that OnClientClick will be directly replaced by the JavaScript event handler onclick once the page is rendered, without rendering OnClientClick's value.

To circumvent this problem, you either can set the OnClientClick property in the code-behind:

protected void Page_Load(object sender, EventArgs e)
{
    btnNewSec.OnClientClick="javascript:void(window.open ('ft_newsec.aspx?ftid='+document.getElementById('"+lblTreatyNo.ClientID+"').innerHTML+'',null,'height=220,width=300,resizable=yes,status=no,toolbar=no,menubar=no,location=no,scrollbars=yes')); 

    return false;
}

Or, if you want to do it on the client-side, you could do the following with jQuery:

$(function() {
    $("#<%= btnNewSec.ClientID %>").click(function(e) {
        window.open('ft_newsec.aspx?ftid=' + document.getElementById('<%= lblTreatyNo.ClientID %>').innerHTML + '', null, 'height=220,width=300,resizable=yes,status=no,toolbar=no,menubar=no,location=no,scrollbars=yes');
        e.preventDefault();
    });
});

Once the DOM is loaded, the above defined jQuery code will attach your JavaScript code to the button's click event; once the user hits the button, your JavaScript code will be executed.

Answer 3

Here is a sample scenario.
Suppose you have a label and a button inside a content page of a master page.
On clicking the button you want the labels text at clientside.

<div>
    <asp:Label ID="myLabel" runat="server" Text="Hello World"></asp:Label><br />
    <asp:Button ID="myButton" runat="server" Text="Click Me"/>
</div>

Add this on PageLoad Event

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        myButton.Attributes.Add("onclick", "javascript:return ChangeLabelText('"
            + myLabel.ClientID + "');");
    }
}

This way the rendered ClientID get passed to your function.
Now access it using javascript.

function ChangeLabelText(label_id) {
    alert(document.getElementById(label_id));
    //prevents postback, return true if you need postback
    return false;
}

Happy Coding!

Answer 4

What is the version of ASP.NET you're running? If it's 4.0 using Control.ClientIDMode might help