Post
Ask Question

Change Page Title Dynamically and Clear TextBox Value With JavaScript

Introduction

This article helps you with different type of solution like changing the page title dynamically and clearing a TextBox value using "jQuery" and "JavaScript" in ASP.NET. Here I explain each and every topic separately.

  • Change Page Title Dynamically with JavaScript in ASP.NET

Here I will explain how to change or set a page title dynamically with JavaScript in ASP.NET.

In the following script I simply use a JavaScript function with the name "changeTitle()" to change the title of the "Default.aspx" page.

Example

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Welcome</title>  
  6. <script type="text/javascript">  
  7.     function changeTitle() {  
  8.         document.title = 'New Title';  
  9.         }  
  10. </script>  
  11.  </head>  
  12. <body>  
  13.     <form id="form1" runat="server">  
  14.     <div>  
  15.         <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>  
  16.     </div>  
  17.     </form>  
  18. </body>  
  19. </html> 

Now I call the "changeTitle()" function above on the button click to do that  I simply double-clicked on the ASP button and wrote the specified code.

  1. protected void Button1_Click(object sender, EventArgs e)  
  2. {  
  3.     ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "call me", "changeTitle()", true);  
  4. }   

Output

Before the button click the title looks like:

before-button-click.jpg
 

After the button click:

after-button click.jpg 

  • Clear TextBox value with jQuery in ASP.NET

Here I will explain how to clear a TextBox value using jQuery.

The following is the jQuery code to clear all TextBox values:

 

  1.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
  2.     <!-- This script For a All textboxes-->  
  3. <script type="text/javascript" lang="js">  
  4.     $(function () {  
  5.         $('#Button1').click(function () {  
  6.             $('input[type=text]').each(function () {  
  7.                 $(this).val('');  
  8.             })  
  9.         })  
  10.     })  

 

jQuery code to clear specific TextBox values:

  1. <script type="text/javascript" lang="js">  
  2.     $(function () {  
  3.         $('#Button2').click(function () {  
  4.            $('#TextBox1').val('');  
  5.         })  
  6.     })  
  7. </script> 

Now I write the complete example to do both of the preceding (clear specific and clear all textbox values) things.

Here, we have two ASP textboxes and two buttons, "Button1" clears all TextBox values and "Button2" clears a specific (in other words "TextBox1") value.

"Default.aspx"

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Welcome</title>  
  6.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
  7.     <!-- This script For a All textboxes-->  
  8. <script type="text/javascript" lang="js">  
  9.     $(function () {  
  10.         $('#Button1').click(function () {  
  11.             $('input[type=text]').each(function () {  
  12.                 $(this).val('');  
  13.             })  
  14.         })  
  15.     })  
  16. </script>  
  17.     <!-- This script For a  TextBox1-->  
  18.     <script type="text/javascript" lang="js">  
  19.     $(function () {  
  20.         $('#Button2').click(function () {  
  21.            $('#TextBox1').val('');  
  22.         })  
  23.     })  
  24. </script>  
  25.       <!-- For a specific  textbox-->  
  26.  </head>  
  27. <body style="top: 28px; left: 3px; position: absolute; height: 26px; width: 828px">  
  28.     <form id="form1" runat="server">  
  29.         <p>  
  30.         <asp:Button ID="Button1" runat="server" Text="Clear All Textboxes Value" style="top: 139px; left: 5px; position: absolute; height: 29px; width: 121px" BackColor="#FF9933"/>  
  31.             <asp:Label ID="Label1" runat="server" BackColor="#CCFF66" style="top: 16px; left: 22px; position: absolute; height: 19px; width: 101px" Text="TextBox 1"></asp:Label>  
  32.             <asp:TextBox ID="TextBox1" runat="server" style="top: 5px; left: 165px; position: absolute; height: 31px; width: 128px"></asp:TextBox>  
  33.         </p>  
  34.     <div>  
  35.         <br />  
  36.         <br />  
  37.         <br />  
  38.     </div>  
  39.         <p>  
  40.             <asp:TextBox ID="TextBox2" runat="server" style="top: 70px; left: 165px; position: absolute; height: 31px; width: 128px"></asp:TextBox>  
  41.         </p>  
  42.         <p>  
  43.             <asp:Label ID="Label2" runat="server" BackColor="#CCFF66" style="left: 22px; position: absolute; height: 19px; width: 101px; top: 81px" Text="TextBox 2"></asp:Label>  
  44.         <asp:Button ID="Button2" runat="server" Text="Clear Textbox1 Value" style="top: 138px; left: 150px; position: absolute; height: 29px; width: 137px" BackColor="#FF9933"/>  
  45.         </p>  
  46.     </form>  
  47.     </body>  
  48. </html> 

Output

When you run the "Default.aspx" page then it provides two functionalities.

The first one, using "Button1", clears all the text box values.

clear-all-textbox-value.gif

The second one, using "Button2", clears all specific TextBox values, in other words it only clears the "TextBox1" value.

clear-specific-textbox.gif


Similar Articles