Increment and decrement qty button on shopping cart page

Question

How to add increment(plus +) and decrements(minus -) qty button on shopping cart page?

Answer 1

I have completed by using this code and working perfect.

Find below code from file - template\checkout\cart\item\default.phtml

<input type="text" pattern="\d*" name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" data-cart-item-id="<?php echo $this->jsQuoteEscape($_item->getSku()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Qty')) ?>" class="input-text qty" maxlength="12" />

Replace it with below code

<a class="decrement_qty_<?php echo $_item->getId(); ?>" href="javascript:void(0)">-</a> 
<input type="text" pattern="\d*" name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" data-cart-item-id="<?php echo $this->jsQuoteEscape($_item->getSku()) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Qty')) ?>" class="input-text qty" maxlength="12" />
<a class="increment_qty_<?php echo $_item->getId(); ?>" href="javascript:void(0)">+</a>

Add below code to end of file

<script type="text/javascript">
    //<![CDATA[

    jQuery(document).ready(function(){
        var itemId = '<?php echo $_item->getId(); ?>';
        jQuery('.increment_qty_'+itemId).click(function() {
            jQuery('.btn-update').css('display','block');
            var oldVal = jQuery(this).parent().find("input").val();
            if ( parseFloat(oldVal) >= 1 ) {
                var newVal = parseFloat(oldVal) + 1;
                jQuery(this).parent().find("input").val(newVal);
            }
        });

        jQuery('.decrement_qty_'+itemId).click(function() {
            jQuery('.btn-update').css('display','block');
            var oldVal = jQuery(this).parent().find("input").val();
            if ( parseFloat(oldVal) >= 2 ) {
                var newVal = parseFloat(oldVal) - 1;
                jQuery(this).parent().find("input").val(newVal);
            }
        });
    });
    //]]>
</script>

Answer 2

Try like below:

jQuery function:

$j(document).ready(function() {
     $j("div.quantity").append('<input type="button" value="+" id="add1" />').prepend('<input type="button" value="-" id="minus1" />');
     $j(".plus").click(function(){
     var currentVal = parseInt($j(this).prev(".qty").val());
     if (!currentVal || currentVal == "" || currentVal == "NaN")
     currentVal = 0;
     $j(this).prev(".qty").val(currentVal + 1);
     });

     $j(".minus").click(function(){
     var currentVal = parseInt($j(this).next(".qty").val());
     if (currentVal == "NaN")
     currentVal = 0;
     if (currentVal > 0){
     $j(this).next(".qty").val(currentVal - 1);
     }
     });
     });

Refer this for better understanding.

Hope this works for you