Magento - Ajax add to cart and quantity box in list.phtml

To add quantity box with increment + and - and also using ajax add to cart, you should first take the quantity increment box with CSS styling and also need to include a dynamic form (multiple forms per product) as shown in the below code :

<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId()?>"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
        <script type="text/javascript">
            function setQty<?php echo $i;?>(id, url) {
                var qty = document.getElementById('qty' + <?php echo $i;?>).value;
                document.getElementById('addtocartlink' + id).innerHTML = '<button type="button" class="addtocartbutton" onclick="setLocation(\'' + url + 'qty/' + qty + '/\')"></button>';
            }
        </script>
        <div class="productslistboxcont"> <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(250); ?>"  alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="imgborder" /></a>
          <div class="productslisttitle"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></div>
          <div class="productslistprice"> <span>Price: <?php echo $this->getPriceHtml($_product, true) ?> <span>|</span> Qty:</span> <span class="cart"> <span>
            <input type="text" name="qty" id="qty<?php echo $i;?>" maxlength="12" value="<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>" title="<?php echo $this->__('Qty') ?>" class="cartnum" />
            </span> <img src="<?php echo $this->getSkinUrl("images/cararrowup.png"); ?>" class="toparrow" onclick="var qty_el<?php echo $i;?> = document.getElementById('qty<?php echo $i;?>'); var qty<?php echo $i;?> = qty_el<?php echo $i;?>.value; if( !isNaN( qty<?php echo $i;?> )) qty_el<?php echo $i;?>.value++;setQty<?php echo $i;?>(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');return false;" /> <img src="<?php echo $this->getSkinUrl("images/cararrowdown.png"); ?>" class="downarrow" onclick="var qty_el<?php echo $i;?> = document.getElementById('qty<?php echo $i;?>'); var qty<?php echo $i;?> = qty_el<?php echo $i;?>.value; if( !isNaN( qty<?php echo $i;?> ) &amp;&amp; qty<?php echo $i;?> &gt; 0 ) qty_el<?php echo $i;?>.value--;setQty<?php echo $i;?>(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');return false;"  /> </span> </div>
          <?php if(!$_product->isSaleable()): ?>
          <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
          <?php endif; ?>
          <div id="addtocartlink<?php echo $_product->getId(); ?>">
            <button type="button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')" class="addtocartbutton"></button>
          </div>
          
        </div>
      </form>

Hope this helps to solve someone's problem ! For any other queries please feel free to write us at prashcreations(at)gmail(dot)com