I am developing a site on Magento 1.8.1.0 and using following plugin for add to cart with ajax.
http://www.magentocommerce.com/magento-connect/ajax-add-to-cart-1.html
It is working fine on both category listing page and product view page but i need quantity field on category listing page and for that i am copying the form tag with quantity field from product view page
C:\wamp\www\mage\app\design\frontend\bluefin\default\template\catalog\product\view.phtml to C:\wamp\www\mage\app\design\frontend\bluefin\default\template\catalog\product\list.phtml
On the product view page ajax is working on form id and form code looks like this
<form action="http://localhost/mage/index.php/checkout/cart/add/uenc/aHR0cDovL2xvY2FsaG9zdC9tYWdlL2luZGV4LnBocC9mdXJuaXR1cmUvbGl2aW5nLXJvb20vb3R0b21hbi5odG1sP19fX1NJRD1V/product/51/form_key/6sRQPimEU620349z/" method="post" id="product_addtocart_form">
<input name="form_key" type="hidden" value="6sRQPimEU620349z">
<div class="no-display">
<input type="hidden" name="product" value="51">
<input type="hidden" name="related_product" id="related-products-field" value="">
</div>
<div class="product-shop">
<div class="add-to-box">
<div class="add-to-cart">
<label for="qty">Qty:</label>
<input type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty">
<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>
</div>
</div>
</div>
Its javascript code looks like this
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.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;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.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);
}
}.bind(productAddToCartForm);
//]]>
</script>
As we can't have multiple element of same id in an html page that's why i am generating form id through php loop and not using inline property onclick of button. My form ids are product_addtocart_form_0, product_addtocart_form_1, product_addtocart_form_2 and so on. And my script is
<script type="text/javascript">
//<![CDATA[
// console.log(<?php //echo $counter; ?>);
window.onload = 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 = 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;
}
}
}.bind(productAddToCartForm[i]);
productAddToCartForm[i].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);
}
}.bind(productAddToCartForm[i]);
};
var j = 0;
$$('.btn-cart').each( function(item) {
console.log(productAddToCartForm);
item.observe('click', function(event) {
productAddToCartForm[j].submit($(item));
});
j++;
});
}
//]]>
</script>
But when i click add to cart an error appears Uncaught TypeError: Cannot read property 'submit' of undefined
If anyone can help me then it would be great.