CODEWITHSUNDEEP
javascriptjqueryonclickonchange
Soumya
Soumya

Reputation: 893

change event not working for a textbox when the value is assigned externally

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.

Upvotes: 2

Views: 6453

Answers (6)

Senthil
Senthil

Reputation: 539

you can achieve like

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

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

Upvotes: 0

Jai
Jai

Reputation: 74738

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!");
});

Upvotes: 2

웃웃웃웃웃
웃웃웃웃웃

Reputation: 11984

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

Upvotes: 0

billyonecan
billyonecan

Reputation: 20260

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();

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

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');

Upvotes: 2

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

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/

Upvotes: 4

Related Questions