Trigger the ontextchanged() event for an asp:TextBox using Javascript

Question

Trigger the ontextchanged() event for an asp:TextBox using Javascript

I have a specific asp:TextBox that is structured in the following way:

<asp:TextBox runat="server" AutoPostBack="True" ID="txtG1" ontextchanged="txtG1_TextChanged" onmouseout="javascript:RefreshIt(this)"/>

In addition to this, there is a Javascript function called RefreshIt() which successfully triggers every time I move the mouse pointer out of the textbox.

My goal is to make the mouseout event activate the ontextchanged event of the asp:TextBox.

Despite reading several suggestions on Stck Overflow, such as the ones below, none of them seem to be effective:

function RefreshIt(selectObj){
 selectObj.ontextchanged();  
}

function RefreshIt(selectObj){
 selectObj.fireEvent('ontextchanged');  
}

If anyone has any insights or solutions, it would be greatly appreciated.

javascript c#ajax event-handling dom-events

Answer 1

Answer №1

Check out this helpful post on Stack Overflow:

I found a solution that could work for your needs based on the information provided in the link above. Here's a modified version of the code that might give you the desired results:

Aspx:

I made changes to the RefreshIt function to trigger a postback with an argument:

  <script type="text/javascript">
    function RefreshIt(selectObj) {
      __doPostBack('<%= Page.ClientID %>', selectObj.name);
    }
  </script>

</head>
<body>
  <form id="form1" runat="server">
  <div>

    <asp:TextBox runat="server" AutoPostBack="True" ID="txtG1" OnTextChanged="txtG1_TextChanged"
      onmouseout="javascript:RefreshIt(this);" />

    <br />
    <br />
    Text Changed:&nbsp;

    <asp:Label ID="Label1" runat="server"></asp:Label>

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

Code Behind:

I implemented 'IPostBackEventHandler' on the page and managed the 'RaisePostBackEvent' function:

public partial class _Default : 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 = System.DateTime.Now.ToString();
    }
}

Answer 2

Check out this helpful post on Stack Overflow:

I found a solution that could work for your needs based on the information provided in the link above. Here's a modified version of the code that might give you the desired results:

Aspx:

I made changes to the RefreshIt function to trigger a postback with an argument:

  <script type="text/javascript">
    function RefreshIt(selectObj) {
      __doPostBack('<%= Page.ClientID %>', selectObj.name);
    }
  </script>

</head>
<body>
  <form id="form1" runat="server">
  <div>

    <asp:TextBox runat="server" AutoPostBack="True" ID="txtG1" OnTextChanged="txtG1_TextChanged"
      onmouseout="javascript:RefreshIt(this);" />

    <br />
    <br />
    Text Changed:&nbsp;

    <asp:Label ID="Label1" runat="server"></asp:Label>

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

Code Behind:

I implemented 'IPostBackEventHandler' on the page and managed the 'RaisePostBackEvent' function:

public partial class _Default : 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 = System.DateTime.Now.ToString();
    }
}

Answer 3

Answer №2

//Handling Text Changes in JavaScript for Multiple Browsers
//English is not my first language, German is my mother tongue

Html.:
<FORM action="../cgi-bin/`enter your file here (sendmail-anhang.pl)'" enctype="multipart/form-data" method="post" name="onlineform">
<INPUT type="hidden" name="OnFocus_start" value="0">
<INPUT type="hidden" name="OnFocus_startup_value" value="">
<INPUT type="text" name="Vorname" value="*" onKeyPress="if(event.keyCode == 13){;oent('0');return false}"><BR>
<INPUT type="text" name="Name"    value="*" onblur="BlurFunction('Myname')" onFocus="FocusFunction(document.onlineform.Name,this.value)" onkeyup="KeydUpFunction(document.onlineform.Name,this.value,'Myname')" onKeyPress="if(event.keyCode == 13){;oent('1');return false}"><BR>
<INPUT type="text" name="EMail"   value="*" onKeyPress="if(event.keyCode == 13){;oent('2');return false}"><BR>
<INPUT type="submit" value="Send Request">
</FORM>

<SCRIPT>
var stopwatches1

function stopwatch(action) {
    
if(action == "end"){   
  var end = window.sessionStorage.getItem('Mytime')
  window.sessionStorage.removeItem('Mytime')
  clearInterval(stopwatches1)
  return end;
  }

if(action == "continue"){ 
var MyTime1 = window.sessionStorage.getItem('Mytime')
MyTime1++ 
var MyTime2 = MyTime1 +9
window.sessionStorage.setItem('Mytime',MyTime2) 
}
}

function FocusFunction(myField,myFieldValue){
if(document.onlineform.OnFocus_start.value ==  0){
document.onlineform.OnFocus_start.value =  1
document.onlineform.OnFocus_startup_value.value = myFieldValue
}
;}

function KeydUpFunction(myField,myFieldValue,input){
if(myFieldValue != document.onlineform.OnFocus_startup_value.value && document.onlineform.OnFocus_start.value ==  1){   
document.onlineform.OnFocus_start.value =  2
window.sessionStorage.setItem(input,new Date().getTime())
stopwatches1 = setInterval(function(){ stopwatch("continue") }, 10);
}
else{;
if(myFieldValue == document.onlineform.OnFocus_startup_value.value && document.onlineform.OnFocus_start.value ==  2){
document.onlineform.OnFocus_start.value =  1
clearInterval(stopwatches1)
alert("equal")
};}
;}


function BlurFunction(myInput) {
document.onlineform.OnFocus_start.value =  0
document.onlineform.OnFocus_startup_value.value = ""
var field16 = stopwatch("end");    
field16 = field16/1000
window.sessionStorage.removeItem(myInput)
alert("zz  " +field16)

if(field16 <= 0.10 ){
alert("You are a Robot")
}
else{
window.sessionStorage.setItem('Evt2' + myInput,myInput + 'OK2')
}   
}
</SCRIPT>

//Text Change Handling in JavaScript

Html.:
<FORM action="../cgi-bin/`enter code here`sendmail-anhang.pl" enctype="multipart/form-data" method="post" name="onlineform">
<INPUT type="hidden" name="OnFocus_start" value="0">
<INPUT type="hidden" name="OnFocus_startup_value" value="">
<INPUT type="text"   name="Name" value="*" onBlur="BlurFunction()" onFocus="FocusFunction(document.onlineform.Name,this.value)" onKeyUp="KeydUpFunction(document.onlineform.Name,this.value)" onKeyPress="if(event.keyCode == 13){;EnterFunction('1');return false}">
<INPUT type="submit" value="Send Request">
</FORM>

<SCRIPT>
function FocusFunction(myField,myFieldValue){
if(document.onlineform.OnFocus_start.value ==  0){
document.onlineform.OnFocus_start.value =  1
document.onlineform.OnFocus_startup_value.value = myFieldValue
};}

function KeydUpFunction(myField,myFieldValue){
if(myFieldValue != document.onlineform.OnFocus_startup_value.value && document.onlineform.OnFocus_start.value ==  1){   
// Code... do it! 
// alert("unequal") ... "function alert()" it does not work!
}
else{
alert("equal")
};}

function BlurFunction() {
document.onlineform.OnFocus_start.value =  0
}

function EnterFunction(gezu){
document.onlineform.OnFocus_start.value =  0
docf1 =  document.onlineform.Name
docf2 =  document.onlineform.EMail
docf3 =  document.onlineform.Adresse
docf4 =  document.onlineform.Hnr
docf5 =  document.onlineform.plz
docf6 =  document.onlineform.Ort
docf7 =  document.onlineform.phone
docf8 =  document.onlineform.dieNachricht

var gezu4 = new Array(docf1,docf2,docf3,docf4,docf5,docf6,docf7,docf8)
gezu4[gezu].focus()

}
</SCRIPT>

Answer 4

//Handling Text Changes in JavaScript for Multiple Browsers
//English is not my first language, German is my mother tongue

Html.:
<FORM action="../cgi-bin/`enter your file here (sendmail-anhang.pl)'" enctype="multipart/form-data" method="post" name="onlineform">
<INPUT type="hidden" name="OnFocus_start" value="0">
<INPUT type="hidden" name="OnFocus_startup_value" value="">
<INPUT type="text" name="Vorname" value="*" onKeyPress="if(event.keyCode == 13){;oent('0');return false}"><BR>
<INPUT type="text" name="Name"    value="*" onblur="BlurFunction('Myname')" onFocus="FocusFunction(document.onlineform.Name,this.value)" onkeyup="KeydUpFunction(document.onlineform.Name,this.value,'Myname')" onKeyPress="if(event.keyCode == 13){;oent('1');return false}"><BR>
<INPUT type="text" name="EMail"   value="*" onKeyPress="if(event.keyCode == 13){;oent('2');return false}"><BR>
<INPUT type="submit" value="Send Request">
</FORM>

<SCRIPT>
var stopwatches1

function stopwatch(action) {
    
if(action == "end"){   
  var end = window.sessionStorage.getItem('Mytime')
  window.sessionStorage.removeItem('Mytime')
  clearInterval(stopwatches1)
  return end;
  }

if(action == "continue"){ 
var MyTime1 = window.sessionStorage.getItem('Mytime')
MyTime1++ 
var MyTime2 = MyTime1 +9
window.sessionStorage.setItem('Mytime',MyTime2) 
}
}

function FocusFunction(myField,myFieldValue){
if(document.onlineform.OnFocus_start.value ==  0){
document.onlineform.OnFocus_start.value =  1
document.onlineform.OnFocus_startup_value.value = myFieldValue
}
;}

function KeydUpFunction(myField,myFieldValue,input){
if(myFieldValue != document.onlineform.OnFocus_startup_value.value && document.onlineform.OnFocus_start.value ==  1){   
document.onlineform.OnFocus_start.value =  2
window.sessionStorage.setItem(input,new Date().getTime())
stopwatches1 = setInterval(function(){ stopwatch("continue") }, 10);
}
else{;
if(myFieldValue == document.onlineform.OnFocus_startup_value.value && document.onlineform.OnFocus_start.value ==  2){
document.onlineform.OnFocus_start.value =  1
clearInterval(stopwatches1)
alert("equal")
};}
;}


function BlurFunction(myInput) {
document.onlineform.OnFocus_start.value =  0
document.onlineform.OnFocus_startup_value.value = ""
var field16 = stopwatch("end");    
field16 = field16/1000
window.sessionStorage.removeItem(myInput)
alert("zz  " +field16)

if(field16 <= 0.10 ){
alert("You are a Robot")
}
else{
window.sessionStorage.setItem('Evt2' + myInput,myInput + 'OK2')
}   
}
</SCRIPT>

//Text Change Handling in JavaScript

Html.:
<FORM action="../cgi-bin/`enter code here`sendmail-anhang.pl" enctype="multipart/form-data" method="post" name="onlineform">
<INPUT type="hidden" name="OnFocus_start" value="0">
<INPUT type="hidden" name="OnFocus_startup_value" value="">
<INPUT type="text"   name="Name" value="*" onBlur="BlurFunction()" onFocus="FocusFunction(document.onlineform.Name,this.value)" onKeyUp="KeydUpFunction(document.onlineform.Name,this.value)" onKeyPress="if(event.keyCode == 13){;EnterFunction('1');return false}">
<INPUT type="submit" value="Send Request">
</FORM>

<SCRIPT>
function FocusFunction(myField,myFieldValue){
if(document.onlineform.OnFocus_start.value ==  0){
document.onlineform.OnFocus_start.value =  1
document.onlineform.OnFocus_startup_value.value = myFieldValue
};}

function KeydUpFunction(myField,myFieldValue){
if(myFieldValue != document.onlineform.OnFocus_startup_value.value && document.onlineform.OnFocus_start.value ==  1){   
// Code... do it! 
// alert("unequal") ... "function alert()" it does not work!
}
else{
alert("equal")
};}

function BlurFunction() {
document.onlineform.OnFocus_start.value =  0
}

function EnterFunction(gezu){
document.onlineform.OnFocus_start.value =  0
docf1 =  document.onlineform.Name
docf2 =  document.onlineform.EMail
docf3 =  document.onlineform.Adresse
docf4 =  document.onlineform.Hnr
docf5 =  document.onlineform.plz
docf6 =  document.onlineform.Ort
docf7 =  document.onlineform.phone
docf8 =  document.onlineform.dieNachricht

var gezu4 = new Array(docf1,docf2,docf3,docf4,docf5,docf6,docf7,docf8)
gezu4[gezu].focus()

}
</SCRIPT>

Answer 5

Answer №3

Instead of manually triggering the postback each time the text is altered, consider setting the AutoPostBack property of the textbox to true. This will automatically handle the postback and fire the textchanged event!

An easy solution indeed.

Answer 6

Instead of manually triggering the postback each time the text is altered, consider setting the AutoPostBack property of the textbox to true. This will automatically handle the postback and fire the textchanged event!

An easy solution indeed.

Trigger the ontextchanged() event for an asp:TextBox using Javascript

Answer №1

Aspx:

Code Behind:

Answer №2

Answer №3

Similar questions

In order to properly set up an AutoNumeric object, it is essential to have at least one valid parameter provided

Tips for incorporating external JavaScript code into React components

What methods can I use to identify my current page location and update it on my navigation bar accordingly?

Tips for automatically updating a start and end page input field

Guide on utilizing the print feature in C# Selenium with Chrome driver

Sending data to a function that is generated dynamically within a loop

How to Develop a WebSocket Client for Mocha Testing in a Sails.js Application?

Cookies are mysteriously invisible in the developer console of Safari/Chrome when using the Set-Cookie Header, yet they miraculously appear in server logs

Using the data from two input fields, an ajax request is triggered to dynamically populate the jQuery autocomplete feature

The challenge with linking within Layerslider

Selecting a dropdown value dynamically after a form submission in ColdFusion using jQuery

Modify the h:outputText value dynamically with the power of jQuery!

Optimizing rest service calls with $resource

How come I am receiving the E11000 error from Mongo when I have not designated any field as unique?

Synchronize two slideshows in a cycle with timed delays between each cycle

How can I show the mini-cart on the top menu in Magento 1.9?

The Vue.js transition feature seems to be malfunctioning when trying to display a modal

Issue encountered during the installation of gulp using npm install

Ensure the backslashes are removed from the AWS Lambda string API response

Shade within the autocomplete