How do I detect an inputfield value change event if changed via jquery?

Question

Using jQuery want to update a hidden text field when the value in a text input field changes.

This works if I enter it manually and click tab. But when I click on one of the buttons that changes the text input value via JQuery it is not activating the event.

$( document ).ready(function() {
    $( "body" ).on( "click", "button[data-type='PPA']", function( event ) {
        event.preventDefault();
        $("input#DonationAmount").val($(this).val());
    });
    $( "body" ).on( "change", "#DonationAmount", function( event ) {
        event.preventDefault();
        $("input[name='amount']").val($(this).val());
    });
});

The HTML that fires the actions above

<button data-type="PPA" type="button" value="10">$10</button>
<button data-type="PPA" type="button" value="20">$20</button>
<button data-type="PPA" type="button" value="50">$50</button>
<button data-type="PPA" type="button" value="100">$100</button>
<input type="text" id="DonationAmount" value="25"/>

The HTML that I am trying to update

<input type="hidden" name="amount" value="25">

Possible duplicate of [Detect programmatic changes on input type text](http://stackoverflow.com/questions/16013024/detect-programmatic-changes-on-input-type-text) — Zakaria Acharki, Dec 02 '15 at 23:25

score 1 · Accepted Answer · answered Dec 02 '15 at 23:25

1

Simply use: $("input#DonationAmount").trigger('change'); and that should do it.

answered Dec 02 '15 at 23:25

divix

1,265
13
27

How do I detect an inputfield value change event if changed via jquery?

1 Answers1