Hide Label Automatically after some seconds using JavaScript

Abhishek Arora
Mar 27, 2015
10.7k
0
1
Blog

Introduction

Open Visual Studio and create new project and select Web template from the list and select ASP.NET Empty Web Application. Enter the name of your application and click on OK.

Right click on the project and select Add -> Web Form and name it as Home.aspx.

Now Drag and drop one TextBox, a button and a Label on the Home.aspx page.

Paste the following JavaScript function in the head section of the Home.aspx page.

<script type="text/javascript">
window.onload = function ()
{
var seconds = 5;
setTimeout(function () {
document.getElementById("<%=displaymessage.ClientID %>").style.display = "none";
}, seconds * 1000);
};
</script>

Here I am hiding the Label after 5 seconds.

Below is the code to make the label visible when Submit Form button is clicked.

protected void OnClickSubmitButton(object sender, EventArgs e)
{
displaymessage.Visible = true;
}

ASPX Page Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="HideLabelAutomatically.Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HideLabelAutomatically</title>
<script type="text/javascript">
window.onload = function ()
{
var seconds = 5;
setTimeout(function () {
document.getElementById("<%=displaymessage.ClientID %>").style.display = "none";
}, seconds * 1000);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Enter Name:
<asp:TextBox ID="Name" runat="server" />
<br />
<br />
<asp:Button ID="submitbutton" Text="Submit Form" runat="server" OnClick="OnClickSubmitButton" />
<br />
<br />
<asp:Label ID="displaymessage" ForeColor="Green" Font-Bold="true" Text="Form has been submitted successfully." runat="server" Visible="false" />
</div>
</form>
</body>
</html>