How to Fire Ontextchanged Event of an Asp:TextBox via Javascript

Shiv Yadav Feb 02, 2024

JavaScript JavaScript Ajax

How to Fire Ontextchanged Event of an Asp:TextBox via Javascript

Well, if you don’t want to do it with Ajax or anything else and enjoy the normal ASP.NET postback to happen, you can do this (without using any other library):

In the code file, If you are using C# and .NET 2.0 or higher, add the following interface to the Page class, so it looks like this:

public partial class Default : System.Web.UI.Page, IPostBackEventHandler {}

Then you need to add this function to your code file.

public void RaisePostBackEvent(string eventArgument) {}

Write the following code in your onclick event in JavaScript.

var pageId = '<%=  Page.ClientID %>';
__doPostBack(pageId, argumentString);

The code file then calls the RaisePostBackEvent method with the eventArgument, argument as the String argument passed by JavaScript. You can now call any other event you want.

Here is the possible solution to the problem.

WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="textbox.WebForm1" %>

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

   <script type="text/javascript">
    function RefreshIt(selectObj) {
      __doPostBack('<%= Page.ClientID %>', selectObj.name);
    }
   </script>
<body>
  <form id="form1" runat="server">
  <div>
     <asp:TextBox runat="server" AutoPostBack="True" ID="txtG1" OnTextChanged="txtG1_TextChanged"
      onmouseout="javascript:RefreshIt(this);" ></asp:TextBox>
    <br />
    &nbsp;<asp:Label ID="Label1" runat="server" Font-Size="Large"></asp:Label>

  </div>
  </form>
</body>
</html>

When you run code in the browser, you will get the output like this:

Fire Ontextchanged Event of an Asp:TextBox via Javascript

when you enter the text in the input field, it will trigger the ontextchange event and give output(i.e., in Red color) like this:

Fire Ontextchanged Event of an Asp:TextBox via Javascript - ontextchange event

You can change the RefreshIt function to postback as an argument.

You may need to know the code working behind and add IPostBackEventHandler to the page and handle the RaisePostBackEvent function.

WebForm1.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace textbox {
  public partial class WebForm1 : System.Web.UI.Page, IPostBackEventHandler {
    protected void Page_Load(object sender, EventArgs e) {}

    public void RaisePostBackEvent(string Arg) {
      if (txtG1.ID == Arg)
        txtG1_TextChanged(txtG1, null);
    }

    protected void txtG1_TextChanged(object sender, EventArgs e) {
      Label1.Text = txtG1.Text;
      Label1.ForeColor = System.Drawing.Color.Red;
      Label1.BackColor = System.Drawing.Color.White;
    }
  }
}

You may use the following mentioned code to fire the ontextchanged() event of asp:TextBox via JavaScript.

Author: Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

Related Article - JavaScript Ajax