Buttons Plus & Minus

How to increment or decrement a form field using jQuery, specially useful for quantity fields.

HTML

<form id='myform' method='POST' action='#'>
    <input type='text' name='price' id='price' value='22' />
    <input type='text' name='price' id='price' value='22' />
     <input type='text' name='total' id='total' value='' />
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>

CSS

#myform {
    text-align: center;
    padding: 5px;
    border: 1px dotted #ccc;
    margin: 2%;
}
.qty {
    width: 40px;
    height: 25px;
    text-align: center;
}
input.qtyplus { width:25px; height:25px;}
input.qtyminus { width:25px; height:25px;}

JavaScript

jQuery(document).ready(function(){

      $("#price").each(function(){
        total += parseFloat(this.value);
      });

      // This button will increment the value
      $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
          // Increment
          $('input[name='+fieldName+']').val(currentVal + 1);
          qty = parseInt($('.qty').val());    
          price = parseFloat($('#price').val());
          $('#total').val((qty * price ? qty * price : 0).toFixed(2));
        } else {
          // Otherwise put a 0 there
          $('input[name='+fieldName+']').val(0);
          qty = parseInt($('.qty').val());    
          price = parseFloat($('#price').val());
          $('#total').val((qty * price ? qty * price : 0).toFixed(2));
        }
      });
      // This button will decrement the value till 0
      $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
          // Decrement one
          $('input[name='+fieldName+']').val(currentVal - 1);
          qty = parseInt($('.qty').val());    
          price = parseFloat($('#price').val());
          $('#total').val(((qty * price > 0) ? qty * price : 0).toFixed(2));
        } else {
          // Otherwise put a 0 there
          $('input[name='+fieldName+']').val(0);
          qty = parseInt($('.qty').val());    
          price = parseFloat($('#price').val());
          $('#total').val(((qty...