Automatically Hide Label after some seconds 5 seconds in ASPNet

In this short article I have shown the technique how to automatically hide an ASP.Net Label control after some seconds (say 5 seconds) using JavaScript.

HTML Markup

The HTML Markup consists of a TextBox, a Button and a Label for which the visible property is set to False. The Label will be made visible from server side after the form is submitted.

Enter Name:

<asp:TextBox ID="txtName" runat="server" />

<br />

<asp:Button Text="Submit" runat="server" OnClick="Submit" /><br />

<br />

<asp:Label ID="lblMessage" ForeColor="Green" Font-Bold="true" Text="Form has been submitted successfully." runat="server" Visible="false" />

Below is the code to make the Label visible on button click.

protected void Submit(object sender, EventArgs e)

{

lblMessage.Visible = true;

ClientScript.RegisterStartupScript(this.GetType(), "alert", "HideLabel();", true);

}

VB.Net

Protected Sub Submit(sender As Object, e As EventArgs)

lblMessage.Visible = True

ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "HideLabel();", True)

End Sub

Automatically Hiding Label control after 5 seconds using JavaScript

Below is the JavaScript function that will hide the Label after 5 seconds. This function gets called using ClientScript RegisterStartupScript method when the Button is clicked.

A variable seconds holds the value which determines after how many seconds the Label will hide. You can set whatever value you need in seconds as per your requirement.

Finally within JavaScript setTimeout function, the Label is hidden by setting its CSS display property to none and the timeout is specified by multiplying the ‘seconds’ variable to 1000 as setTimeout function accepts value in Milliseconds.

function HideLabel() {

var seconds = 5;

setTimeout(function () {

document.getElementById("<%=lblMessage.ClientID %>").style.display = "none";

}, seconds * 1000);

};

</script>

Screenshot