Trigger Event on Text box Value change

Question

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>

$("#address").change will trigger if you perform any change in text field. If you want to trigger alert only when button click why you don't use alert inside button click function. — Yasitha
– Yasitha, Commented Mar 26, 2014 at 6:30
This is not my original application ! My application deals with changing values dynamically to all the txt fields and i have to trigger event for each! This sample can help with my application ! So i posted this — user3383301
– user3383301, Commented Mar 26, 2014 at 6:33

Duc Filan · Accepted Answer · 2017-12-16 03:39:44Z

8

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>

edited Dec 16, 2017 at 3:39

Duc Filan

7,2073 gold badges24 silver badges26 bronze badges

answered Mar 26, 2014 at 6:28

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-03-26 06:29:32Z

0

Trigger the change event like this:

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

answered Mar 26, 2014 at 6:29

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

BolandT · Accepted Answer · 2014-03-26 06:46:55Z

0

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

answered Mar 26, 2014 at 6:46

BolandT

747 bronze badges

Collectives™ on Stack Overflow

Trigger Event on Text box Value change

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related