Alert Text When Input is Changed by Button

Question

I needed to add plus/minus buttons to an input box and then produce a message when the quantity is changed using jQuery. I've gotten the buttons to work (they change the numbers) but my alert doesn't fire. I'm stumped.

$('input#w3934_txtQantity').before("<input type='button' value='-' class='qtyminus' field='w3934_txtQantity' />");
$('input#w3934_txtQantity').after("<input type='button' value='+' class='qtyplus' field='w3934_txtQantity' />");

 $(document).on( 'input', '#w3934_txtQantity', function() {
         alert("Change!");
         });


$(document).on( 'click', '.qtyplus', function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get its current value
        var currentVal = parseInt($('#w3934_txtQantity').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
           $('#w3934_txtQantity').val(currentVal + 10);
            } else {
            // Otherwise put min quantity there
           $('#w3934_txtQantity').val(0);
        }
       
    });
    // This button will decrement the value till 0
     $(document).on( 'click', '.qtyminus', function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get its current value
        var currentVal = parseInt($('#w3934_txtQantity').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
        $('#w3934_txtQantity').val(currentVal - 10);
        } else {
            // Otherwise put min quantity there
            $('#w3934_txtQantity').val(0);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table cellspacing="0" border="0" style="width:100%;height:100%;padding-top:5px;">
<tr>
<td valign="bottom"><span id="w3934_lblQuantity" style="white-space:nowrap;">Quantity</span></td></tr>
<tr><td class="SubTotalLine"><input type="text" value="170" id="w3934_txtQantity" style="text-align:right;" /></td></tr>
</table>

Rory McCrossan · Answer 1 · 2017-08-16T13:31:38.747

The issue is because no event is raised when the input value is changed programmatically. Instead you can trigger() one manually.

Also note that you can tidy the logic around incrementing/decrementing the value by providing a function to val() which amends the current figure, and also by using type coercion to specify 0 as the default value if an invalid integer was specified. Try this:

$('input#w3934_txtQantity').before('<input type="button" value="-" class="qtyminus" field="w3934_txtQantity" />');
$('input#w3934_txtQantity').after('<input type="button" value="+" class="qtyplus" field="w3934_txtQantity" />');

$(document).on('input', '#w3934_txtQantity', function() {
  console.log("Change!");
}).on('click', '.qtyplus', function(e) {
  e.preventDefault();
  $('#w3934_txtQantity').val(function(i, v) {
    return (parseInt(v) + 10) || 0;
  }).trigger('input');
}).on('click', '.qtyminus', function(e) {
  e.preventDefault();
  $('#w3934_txtQantity').val(function(i, v) {
    return (parseInt(v) - 10) || 0;
  }).trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table cellspacing="0" border="0" style="width:100%;height:100%;padding-top:5px;">
  <tr>
    <td valign="bottom"><span id="w3934_lblQuantity" style="white-space:nowrap;">Quantity</span></td>
  </tr>
  <tr>
    <td class="SubTotalLine"><input type="text" value="170" id="w3934_txtQantity" style="text-align:right;" /></td>
  </tr>
</table>

As an aside you can utilise data attributes on the inc/dec buttons so that your code can be made completely DRY:

$('input#w3934_txtQantity')
  .before('<input type="button" value="-" class="amend" data-amendment="-10" data-field="w3934_txtQantity" />')
  .after('<input type="button" value="+" class="amend" data-amendment="10" data-field="w3934_txtQantity" />');

$(document).on('input', '#w3934_txtQantity', function() {
  console.log("Change!");
}).on('click', '.amend', function(e) {
  e.preventDefault();
  var amendment = $(this).data('amendment');
  var id = $(this).data('field');
  $('#' + id).val(function(i, v) {
    return (parseInt(v) + amendment) || 0;
  }).trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table cellspacing="0" border="0" style="width:100%;height:100%;padding-top:5px;">
  <tr>
    <td valign="bottom"><span id="w3934_lblQuantity" style="white-space:nowrap;">Quantity</span></td>
  </tr>
  <tr>
    <td class="SubTotalLine"><input type="text" value="170" id="w3934_txtQantity" style="text-align:right;" /></td>
  </tr>
</table>

Alert Text When Input is Changed by Button

1 Answers1