Reputation: 5620
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
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
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
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
Reputation: 1635
If you could use jQuery, it would be something like this
$('#id_of_text_area').change(function(){
//do something
});
Upvotes: -1