I know I can achieve this by adding the alert function in the button click listener body but I don't want to do it that way.I want whenever this textbox receives text, i get an alert.
this is the code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<title>Page Title</title>
</head>
<body>
<form>
<input id="check" type="text" name="check" >
</form>
<button id="test">ClickMe</button>
<script>
$(document).ready(function() {
$('#test').click(function () {
$('#check').val('Example') ;
})
$('#check').on('input propertychange paste change', function () {
alert("text added");
})
})
</script>
</body>
</html>
Setting the value with Javascript doesn't trigger an event, so you need to trigger the event manually. Also, you really only need the "input" event. The others are irrelevant or redundant.
$('#check').trigger('input');
Or you can chain it since you're using jQuery:
$('#check').val('N001-01-1356/2017').trigger('input');
Example:
$(document).ready(function() {
$('#test').click(function() {
$('#check').val('N001-01-1356/2017').trigger('input');
})
$('#check').on('input', function() {
alert("text added");
})
})<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<form>
<input id="check" type="text" name="check">
</form>
<button id="test">ClickMe</button>