在外部分配值时，更改事件不适用于文本框

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

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 2

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 3

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 4

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 5

$(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
}

Answer 6

you can achieve like

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

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