How to change the value of an asp label with JavaScript?

Question

I'm trying to add an error label to the top of a panel I have. I have a button created in C# on page load that calls a JavaScript function that I want to display an error message on my panel when clicked.

C#:

private void CreateButton(int pID, string changeType)
{
    ASPxButton btn = new ASPxButton();
    btn.Text = "Execute Request";
    btn.ID = "btn" + changeType;
    btn.AutoPostBack = false;
    btn.ClientSideEvents.Click = GetClientSideEventHandler(string.Format("OnProcessRequest(s, e, '{0}','{1}')", pID.ToString(), changeType));
    TableRow oRow = new TableRow();
    TableCell oCell = new TableCell();
    oCell.CssClass = "table-cell";
    oCell.Controls.Add(btn);
    oRow.Cells.Add(oCell);
    tblButtons.Rows.Add(oRow);

}

JS:

function OnProcessRequest$(pID, pChangeType) {
    document.getElementById('errLabel').value = "Test";
}

ASPX:

<asp:Label ID="errLabel" runat="server"/>

When this code runs, it always throws the following error:

Error: Unable to set property 'value' of undefined or null reference.

I have tried also using:

document.getElementById('<%=errLabel.ClientID%>').value = "Test";

but this also throws the error.

How can I change the value of this label when this button is clicked in JS?

Answer 1

Try adding ClientIDMode="Static" to your label if that property is available to you. Or you could add ClientID="errLabel" as an alternative. What's happening is asp.net will automatically give your field a generated id for closure on the client side so it will not match your id "errLabel".

    <asp:Label runat="server" ID="errLabel" ClientIDMode="Static"></asp:Label>

OR

    <asp:Label runat="server" ID="errLabel" ClientID="errLabel"></asp:Label>

https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.control.clientidmode?view=netframework-4.8#System_Web_UI_Control_ClientIDMode

Answer 2

Ok, to change a asp.net label in JavaScript, you can do this:

(we assume you set the label client id mode>

So, if we have label on the page, you can do this:

<asp:Label ID="Label1" runat="server" Text="" ClientIDMode="Static"></asp:Label>

JavaScript to change above is this:

 var lbl = document.getElementById('<%=Label1.ClientID%>');

 lbl.innerText = "Js lable text changed";

Or

 lbl.innerHTML = "<h2>this is some big text by js</h2>"

Be VERY careful with case, and VERY careful with extra spaces etc. in the get Element.

Also, do NOT forget to include the Text="" in your label!!!! (you are missing this!!!).

JavaScript is VERY flakey - one small wrong move, and it just rolls over and goes home. (and the debugger in browsers is on par with a trip to the dentist).

You can also use jQuery.

The above thus becomes this:

var lbl = $('#Label1');
lbl1.text("js jquery text change");

Now, lets do the same for a text box.

our asp.net text box:

<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static" ></asp:TextBox>

JavaScript:

var txt = document.getElementById('<%=TextBox1.ClientID%>');
txt.value = "This is js text for text box";

And as jQuery:

var txt = $('#TextBox1');
txt.val("js jquery text for the text box");

So, for a asp.net label? You use innerText, or innerHTML. (or text("your text here") with jQuery)

and with jQuery, you use .value without ()