Magento – Magento Ajax Add To Cart Button Error

I tried some thing and it is working fine for me, i am sharing code hope this might be useful for someone else or one can suggest me the better approach.

In mage\app\design\frontend\your-design-package\default\template\catalog\product\list.phtml

Replace the following code

<?php if($_product->isSaleable()): ?>
      <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<?php else: ?>

with

<?php if($_product->isSaleable()): ?>

<form class="product_addtocart_form" action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $counter; ?>"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
    <?php echo $this->getBlockHtml('formkey') ?>
    <div class="no-display">
        <input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
        <input type="hidden" name="related_product" id="related-products-field" value="" />
    </div>

    <?php $buttonTitle = $this->__('Add to Cart'); ?>
    <div class="add-to-cart">
        <?php if(!$_product->isGrouped() && !$_product->isconfigurable()): ?>
        <label for="qty"><?php echo $this->__('Qty:') ?></label>
        <input type="text" name="qty" id="qty_<?php echo $counter; ?>" maxlength="12" value="<?php echo '1'; //echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
        <?php endif; ?>
        <button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" data-count="<?php echo $counter; ?>" data-ptype="<?php echo $_product->getTypeID(); ?>"><span><span><?php echo $buttonTitle ?></span></span></button>
        <?php echo $this->getChildHtml('', true, true) ?>
    </div>
</form>

<?php else: ?>

Remember i am generating form id and quantity field id with loop and as there are two display modes in magento category listing page List Mode and Grid Mode so you have to replace the above code in both areas.

id="product_addtocart_form_<?php echo $counter; ?>"

Also for button i have used two HTML5 data attributes data-count and data-ptype. In data-count i am just storing the value of $counter variable and in the data-ptype i am storing product type (i.e simple, grouped etc)

data-count="<?php echo $counter; ?>" data-ptype="<?php echo $_product->getTypeID(); ?>"

finally the javascript code

<script type="text/javascript">
//<![CDATA[
    // console.log(<?php //echo $counter; ?>);
    document.observe("dom:loaded", function() {
        var productAddToCartForm = new Array();
        for (var i = 0; i < <?php echo $counter; ?>; i++) {
            productAddToCartForm[i] = new VarienForm('product_addtocart_form_'+i);
            productAddToCartForm[i].submit = ajx_form_submit.bind(productAddToCartForm[i]);
            productAddToCartForm[i].submitLight = ajx_form_submitLight.bind(productAddToCartForm[i]);
        };

        $$('.btn-cart').each( function(item) {
            // console.log($(item).up('form').action);
            item.observe('click', function(event) {
                if (item.dataset.ptype == 'simple') {
                    ajaxcart.ajaxCartSubmit(productAddToCartForm[item.dataset.count]);
                } else if (item.dataset.ptype == 'grouped') {
                    formurl = $(item).up('form').action;
                    ajaxcart.ajaxCartSubmit(formurl);
                } else if (item.dataset.ptype == 'configurable') {
                    formurl = $(item).up('form').action + '?options=cart&ajax=true';
                    ajaxcart.getConfigurableOptions(formurl);
                }
                // productAddToCartForm[item.dataset.count].submit(item);
            });
        });
    });

    var ajx_form_submit = function(button, url) {
        if (this.validator.validate()) {
            var form = this.form;
            var oldUrl = form.action;

            if (url) {
               form.action = url;
            }
            var e = null;
            try {
                this.form.submit();
            } catch (e) {
            }
            this.form.action = oldUrl;
            if (e) {
                throw e;
            }

            if (button && button != 'undefined') {
                button.disabled = true;
            }
        }
    };

    var ajx_form_submitLight = function(button, url){
        if(this.validator) {
            var nv = Validation.methods;
            delete Validation.methods['required-entry'];
            delete Validation.methods['validate-one-required'];
            delete Validation.methods['validate-one-required-by-name'];
            // Remove custom datetime validators
            for (var methodName in Validation.methods) {
                if (methodName.match(/^validate-datetime-.*/i)) {
                    delete Validation.methods[methodName];
                }
            }

            if (this.validator.validate()) {
                if (url) {
                    this.form.action = url;
                }
                this.form.submit();
            }
            Object.extend(Validation.methods, nv);
        }
    };

    $$('.product_addtocart_form input.qty').each(function(el) {
        el.observe('blur', function(e){
            if( el.value <= 0 || isNaN(el.value) === true) {
                el.value = 1;
            }
        });
    });
//]]>
</script>

It's probably due to your form key expiring. If you're trying to paste this in after it's generated then you'll need to ensure that it has a fresh form key. Try adding it like this:

$form_key = Mage::getSingleton('core/session')->getFormKey();
echo "javascript:setLocationAjax('http://example.com/checkout/cart/add/product/29/form_key/".$form_key."/?&bundle_option[2]=4&bundle_option_qty[2]=1.0000&bundle_option[3]=6&bundle_option_qty[3]=10.0000&bundle_option[4]=13&bundle_option_qty[4]=5.0000')";