Trigger Event on Text box Value change - javascript

I want execute the alert inside the $("#address").change function , but that needs to be done only if the the value is changed using the button .
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('button').click(function(){
$("#address").val("hi")
})
$("#address").change(function(){
alert("The text has been changed.");
});
});
</script>
</head>
<body>
<input type="text" id="address">
<button>Click</button>
</body>
</html>

You can trigger change event in click function:
$('button').click(function(){
$("#address").val("hi")
$("#address").change(); //or $("#address").trigger("change");
});
$("#address").change(function(){
alert("The text has been changed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="address" type="text">
<button>Change</button>

Trigger the change event like this:
$('button').click(function(){
$("#address").val("hi")
$("#address").trigger('change');
});
$("#address").change(function(){
alert("The text has been changed.");
});

If you want the alert on #address change only when the button is clicked and not when changing the #address value manually:
var textChangedHandler = function() {
alert("The text has been changed.");
};
$('button').click(function(){
// Attach event handler for 'change' to #address
$("#address").bind("change", textChangedHandler);
// Update #address value
$("#address").val("hi");
// Trigger 'change'
$("#address").trigger('change');
// Remove event handler for 'change' from #address
$("#address").unbind("change", textChangedHandler);
});
DEMO

Related

Can onchange be triggered within HTML for DIV by passing function(this.value);

Here is some simple code where, when div tag text is changed, an alert should fire:
<!DOCTYPE html>
<html>
<body>
<p>Modify the text by clicking on it, then click outside the field to fire the onchange event.</p>
<div type="text" name="txt" value="" onchange="myFunction(this.value)" contenteditable="true">Change Value by clicking here</div>
<script>
function myFunction(val) {
alert("The input value has changed. The new value is: " + val);
}
</script>
</body>
</html>
Can this be done without using event listeners?
Since you don't want to use an event listener, you can use the onInput attribute, like this:
function myFunction(el) {
alert("The input value has changed. The new value is: " + el.innerHTML);
}
<!DOCTYPE html>
<html>
<body>
<p>Modify the text by clicking on it, then click outside the field to fire the onchange event.</p>
<div type="text" name="txt" value="" oninput="myFunction(this)" contenteditable="true">Change Value by clicking here</div>
</body>
</html>

Remove HTML onchange code using jQuery

Below code snippet has HTML onchange attribute as well as jQuery's change event on the input text. I want only the jQuery's change event to be effective. I tried using both unbind and off without luck.
Could somebody please help?
$(document).ready(function(){
$("#testInput").unbind("change").bind("change",function(){
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');"/>
If you want to remove the "previous" onchange event, use
$("#testInput").removeAttr("onchange")
$(document).ready(function() {
$("#testInput").removeAttr("onchange")
$("#testInput").unbind("change").bind("change", function() {
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');" />
Just remove onchange attribute. removeAttr('onchange') will remove onchange attribute
$(document).ready(function(){
$("input").each(function(){
$(this).removeAttr('onchange');
});
$("input").bind("change",function(){
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');"/>
<input id="testInput2" type="text" onchange="console.log('change');"/>
you could set the onchange to null and add listener, like:
$(document).ready(function(){
//remove inline 'onchange' event by setting it to null
$("#testInput")[0].onchange = null;
$(document).on("change" "#testInput", function(){
console.log("jQuery change");
});
});
try this
$(document).ready(function(){
$(document).on('change','#testInput',function(){
console.log("jQuery change");
});
});

When we assign value jQuery event call?

I have two text fields:
<input type="text" id="ex_1" class="update">
<input type="text" id="ex_2" class="update">
I want when I assign value:
jQuery("#ex_1").val(12);
jQuery event called like below but not on the change but on assign value:
jQuery(".update").change();
jQuery(".update").live('keyup change', function()
{
alert(jQuery(this).val());
}
On the assignment of value jQuery event called?
you can use like this
$(".update").keyup(function () {
$(this).trigger("change");
});
$(".update").change(function () {
alert("change");
});
DEMO
Is this what you are looking for>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../JS/jQuery.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("input").change(function () {
alert('in'); // do you stuff here
});
$("#Button1").click(function () {
$("input").val(12);
$("input").trigger("change");
});
});
</script>
</head>
<body>
<input type="text" id="ex_1" class="update">
<input type="text" id="ex_2" class="update">
<input id="Button1" type="button" value="button" />
</div>
</body>
</html>
.trigger("change") will invoke the elements change function.
In the code above, on click of the button the val will be changed and also the change function will be triggered.
Syntax :
$("selector_of_element").trigger("event_function");
The change event fires only if the value is changed by the user interaction.
If you want to fire event then you have manually trigger event. So use .change(); or.trigger('change');
If you're programatically assigning value, you'll have to manually trigger the change event. Check this answer.
Try this:
jQuery('#ex_1').val(12).change();

Doesn't set event on input when click button

I wrote function, which control input text. When I click button, in Input set value. In that time I need that function 'StartDate1.change' control change input value. So if this is value no equals 12/24/2013 -> clear field. But this is function doesn't work. Can you help me fix it?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="demo_form.asp">
Date: <input type="text" name="Phone" title="title1" value="">
<input id="target" class="ms-ButtonHeightWidth" type="button" accesskey="O"
value="Add date" >
</form>
<script type="text/javascript">
$(document).ready(function(){
$( "#target" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.val('12/25/2013');
});
var StartDate1=$('[title="title1"]');
StartDate1.change(function(event){//doesn't get here
window.setInterval(function(){
if($(event.target).val()==='12/24/2013')
{
//some code
}else
{
$(event.target).val('');
}
});
});
});
</script>
</body>
</html>
This is example on fidler:
Fiddle
If you need to control value in input field use keyup handler
http://jsfiddle.net/yPYDJ/5/
The onchange event only fires when the value changes and the input loses focus.
You can trigger it manually changing your code like this:
$( "#target" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.val('12/25/2013');
StartDate.change();
});
The function passed to window.setInterval is called repeatedly. So value set by the function on button click is reset immediately.
var timeFunction;
$( "#targetb" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.off('change');
StartDate.val('12/25/2013');
StartDate.on('change',function(event){
console.log("lol");
timeFunction=window.setInterval(clearInput,2000);
});
});
function clearInput(){
var StartDate=$('[title="title1"]');
if(StartDate.val()==='12/24/2013')
{
//some code
}else
{
StartDate.val('');
window.clearInterval(timeFunction);
}
}
I have created a new fiddle http://jsfiddle.net/yPYDJ/4/. Check this and accept it ifthis is what you expected.

How to use reset function with JavaScript

Following is the code. I have button called EMPTY ALL button that resets all the input boxes
in the table id= A.
<script type="text/javascript">
$('#resetBtn').on('click', function() {
});
</script>
<table id ="A">
<input type="text" id="clipSno"><td>
<select id="year" name="year" onchange="selclsCd()">
</table>
<div class="area_btnA clfix mgB20">
<a id="searchBtn" class="btnA">Empty ALL</a>
</div>
Now, what comes in
<script type="text/javascript">
$('#resetBtn').on('click', function() {
});
</script>
to empty all the text boxes and select boxes to reset?
$('#resetBtn').on('click', function() {
$("input[type=text], textarea, select").val("");
});
In case you just have to reset specific id's then use this -
$('#resetBtn').on('click', function() {
$("#clipSno, #year").val("");
});
Try this
$(document).ready(function() {
$('#resetBtn').on('click', function() {
$('input[type=text], select, textarea').val('');
});
});
Have fun!

Categories

Resources