change event not working for a textbox when the va

Question

I have a textbox and a button. When I click the button, it sets certain value in the textbox. I want to submit the page whenever the value of the textbox is changed.

Please check here

HTML:

<input type='text' class="set" size=50>
<input type="button" id="click" value="Click" />

JQuery:

$(document).ready(function () {
    $("input").change(function () {
        alert("Changed!");
    });
    $("#click").click(function () {
        $('.set').val('Why am I not getting the alert saying  - Changed! ');
    });
});

I am able to trigger the change event when I am editing the textbox content.I know that the change event gets triggered when the textbox loses focus.This is not the case when I am changing the value by button click.

I have seen answers which monitors the textbox for change at a specified time interval , say 0.1 sec.

Is there no other way for this to be done. Thanks.

EDIT - 1 *Sorry for not being clear* in my original post itself.

My requirement is to trigger an event whenever the inputbox content is changed - Not necessarily by the click of a button.I have added a button just to explain the problem. The change may be due to any reason.

So,the code(inside the button click function)

$('.set').val('Hello').change();

will not solve the problem. Hope I am clear this time.

Please suggest.

Answer 1

You need to do this, when you are setting or changing the value of the text input chain it with .change() too:

 $("#click").click(function () {
    $('.set').val('Why am I not getting the alert saying  - Changed! ').change();
  }); //-------------------------------------this one here-------------^^^^^^^^^

So whenever you set the input value this way the change event will be triggered right after click.

---

May be this could help

$("input").on('change keyup', function () {
    alert("Changed!");
});

Answer 2

You're changing the value of .set programatically, so the event doesn't fire. You have to trigger it manually:

$('.set').val('Why am I not getting the alert saying  - Changed! ').change();

Answer 3

you can achieve like

$('.element').val('value').change(function(){
      $("#form").submit();
}); 

http://jsfiddle.net/senstar2/CHjL5/5/

Answer 4

Fire the event manually after setting the value using the change() function.

$(document).ready(function () {
    $("input").change(function () {
        alert("Changed!");
    });
    $("#click").click(function () {
        $('.set').val('Why am I not getting the alert saying  - Changed! ');
        $('.set').change();  //Manual fire of event.
    });
});

Working Example http://jsfiddle.net/RUdu2/

Answer 5

Programmatically changing the value of an input doesn't fire its change event. You'll have to do that yourself using .trigger('change') (or just .change()) at the same time as changing its value:

$('.set').val('Why am I not getting the alert saying  - Changed! ').trigger('change');

Answer 6

$(document).ready(function () {
    $("input").change(function () {
        Submitform();//Function for submitting form
    });
    $("#click").click(function () {
        $('.set').val('Why am I not getting the alert saying  - Changed! ');
        Submitform();//Function for submitting form
    });
});

Function for submitting the form

function Submitform(){
$("#YourformId").submit();//Submits your form
}