on input event not working on when using button value

user_10427949 0
Viewed 36

I have here an input that getting it's value from buttons. on input event not working when I want to get the value of the input. Please see code below for reference.

var cashin_amount = 0;
$(".button-amount").on("click", function (e) {
    e.preventDefault()

    var amount = $(this).text();
    amount = amount.replace(",", "");
    $("#txtAmount").val(amount);
    cashin_amount = amount;
});

$("#txtAmount").on("input", function () {
    var val = this.val();
    alert(val);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="form-control" id="txtAmount" disabled />
<button type="button" class="btn btn-outline-default btn-sm button-amount"><i class="fas fa-coins"></i>1,000</button>
<button type="button" class="btn btn-outline-default btn-sm button-amount"><i class="fas fa-coins"></i>2,000</button>
<button type="button" class="btn btn-outline-default btn-sm button-amount"><i class="fas fa-coins"></i>3,000</button>
<button type="button" class="btn btn-outline-default btn-sm button-amount"><i class="fas fa-coins"></i>5,000</button>
<button type="button" class="btn btn-outline-default btn-sm button-amount"><i class="fas fa-coins"></i>10,000</button>

jquery
1 Answers

"input" event happens when the user directly types into a form control. The data entered in <input> was done indirectly through the "click" event triggered from the <button>. Just tie into the "click" event for event handling, the results are the same (see demo).

var cashin_amount = 0;
$(".button-amount").on("click", function (e) {
    e.preventDefault()
    var amount = $(this).text();
    amount = amount.replace(",", "");
    $("#txtAmount").val(amount);
    cashin_amount = amount;
    alert(amount);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" class="form-control" id="txtAmount" disabled />
<button type="button" class="btn btn-outline-default btn-sm button-amount"><i class="fas fa-coins"></i>1,000</button>
<button type="button" class="btn btn-outline-default btn-sm button-amount"><i class="fas fa-coins"></i>2,000</button>
<button type="button" class="btn btn-outline-default btn-sm button-amount"><i class="fas fa-coins"></i>3,000</button>
<button type="button" class="btn btn-outline-default btn-sm button-amount"><i class="fas fa-coins"></i>5,000</button>
<button type="button" class="btn btn-outline-default btn-sm button-amount"><i class="fas fa-coins"></i>10,000</button>

user_28132240
Related