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

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?

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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>

    <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

Method 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";

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating