CODEWITHSUNDEEP
javascriptasp.net
Ulhas Tuscano
Ulhas Tuscano

Reputation: 5620

How to detect textbox change event from javascript

I have a textbox asp.net server control. I am modifying the value of textbox from javascript i want to detect when the textbox text is changed. I tried onchange event which gets called on lost foucs when the text changes. But in my case i an changing text from Javascript. how can i achieve this?

Upvotes: 5

Views: 40771

Answers (4)

alex
alex

Reputation: 490657

Updating the value property won't trigger the change event. The change event is triggered by the user.

You can either write a function which changes the value and does whatever else you need to do...

function changeTextarea(str) {
   document.getElementById('a').value = str;
   // Whatever else you need to do.
}

...or poll the textarea's value...

(function() {
   var text = getText();   
   var getText = function() {
      return document.getElementById('a').value;
   }  

   setInterval(function() {
      var newtext = getText();
      if (text !== newText) {
          // The value has changed.
      }
      text = newText; 
   }, 100);
})();

...or explicitly call the onchange() event yourself.

document.getElementById('a').onchange();

(Assuming you set the event up with onchange property.)

The workarounds are not terribly great solutions. Either way, you need to do some intervention to trigger extra code when updating a textarea's value property.

Upvotes: 6

Cos Callis
Cos Callis

Reputation: 5084

Using Jquery you can assign a 'change' handler and invoke the handler like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //makes 'DetectChange' the handler when TextBox1 changes...
            $('#TextBox1').change(function () {
                DetectChange();
            });
         });

        function DetectChange() {
            alert("TextBox1 has been changed");
        }

        function ClickTheButton() {
            // .val actually 'changes the value'
            // while you have to add .change() to invoke the actual change event handler...
            $('#TextBox1').val("Changed When Button Clicked").change();

            //return false prevents the click event of the button from doing a post back
            //keeping everything on the client for this sample..
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <input id="Button1" type="button" value="Change TextBox1" onclick="return ClickTheButton();"  />
    </div>
    </form>
</body>
</html>

Upvotes: 1

Marthin
Marthin

Reputation: 6543

You could force a postback from javascript and hence forcing a page reload event. In the Page.GetPostBackEventReference() you can handle the event and perhaps fire some other event.

This is not a good solution thougth and I truly recommend that you do it all thru javascript or drop the javascript and let .NET hadle everything, perhaps with Ajax.NET

The following link explains hwo you do it for a normal button, but it shouldn't be to hard to make it for a onchange event.

Upvotes: 0

ianace
ianace

Reputation: 1635

If you could use jQuery, it would be something like this

$('#id_of_text_area').change(function(){
    //do something
});

Upvotes: -1

Related Questions