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?
Add a comment
|
4 Answers
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.
7 Comments
alex
@Cos That is with jQuery, of which the OP never mentioned. You also explicitly call
change(), which is basically what I suggested in my answer.alex
@Cos jQuery is written in JavaScript? Really?
djdd87
+1 for not just giving a jQuery answer. Anyway, I thought jQuery was written with unicorn dust and pixie cake. You learn something new every day.
Cos Callis
@Alex. My point is that if the OP is already using javascript there is no barrier to including and using jquery. This, of course, is in response to your comment that OP never mentions JQuery, as if there is a huge chasm to breach between javascript and jquery. I find it interesting that you have so massively expanded your original answer from "You can't...unless...." to a helpful answer. Now OP has some choices for a solution.
alex
@Cos I just clarified the points in my answer. Adding jQuery is trivial to implement, but there are valid reasons why someone may not want to.
|
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>
2 Comments
alex
Why don't you directly pass
DetectChange to the click() method?Cos Callis
@Alex OP states
But in my case i an changing text from Javascript so I used the click event of the button to simulate that element of the scenario. I don't know 'what' javascript OP uses or how it is invokes so I just ginned up demo that would do something similar. You are correct that .change could be called from the click and if that meets the needs of the OP then great.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.
Comments
If you could use jQuery, it would be something like this
$('#id_of_text_area').change(function(){
//do something
});
