Alert Text When Input is Changed by Button [duplicate]

211
August 16, 2017, at 9:03 PM

This question already has an answer here:

  • Why does the jquery change event not trigger when I set the value of a select using val()? 9 answers
  • Input event not working if value is changed with jQuery val() or JavaScript 5 answers

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>

Answer 1

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>

READ ALSO
When a class is clicked, smoothly scroll to div after page loads

When a class is clicked, smoothly scroll to div after page loads

I have this code modified in a effort to smoothly scroll to a specific div on a page when a specific class is clicked on another

122
Uncaught TypeError: Cannot read property &#39;indexOf&#39; of undefined function get continent google map

Uncaught TypeError: Cannot read property 'indexOf' of undefined function get continent google map

Sorry if question is already answered but i can't resolve problem

196
I would like to add the uploadExtraData in bootstrap-fileinput

I would like to add the uploadExtraData in bootstrap-fileinput

I am using bootstrap-fileinput, I am able to upload the file successfully, But I also want to send some data like user details with file to the serveris there any option to add data?

262
How to make slider work on page load?

How to make slider work on page load?

I have a scenario,I used idangero swiper for swiping the images,here my problem is when page loads the swiper is not working,when I reloading it,working properly(Ie; It is not taking transform property when page loads)

114