Limiting "Add to cart" to just 1 click / item

Question

I've noticed that some visitors will click the "Add to cart" button multiple times. This results in the product being added multiple times.

I thought it was my theme, but I've reproduced this on the default Magento theme. Every click until the cart page is recorded, not very good when you have a small window to convince a visitor to buy from you.

How can I limit the "Add to Cart" button to just 1 item on multiple clicks?

EDIT: NEED A TECHNICAL ANSWER / SOLUTION

Answer 1

This is what we do:

When a user clicks 'add to cart' the button is disabled and the box is greyed out. A ' loading.gif ' is displayed onto the page during an Ajax request. When this Ajax request is over the button is re-enabled and the ' loading.gif ' is once again hidden. The cart on the page is then updated and a 'successfully added to cart' message is displayed to the user.

This way the user gets feedback about their actions -- and the consequence of that exact action.

Below is an example of a javascript function that will disable it's own button, display a "loading .gif" for the user, submit the form, and reenable itself once it's execution is complete:

<script type="text/javascript">
    productAddToCartForm.submit = function (button, url) {
                var data = jQuery('#product_addtocart_form').serialize();
                data += '&isAjax=1';

                //this shows a small .gif that tells the user a process is taking place
                jQuery('#ajax_loader').show();

                //this disables the add to cart button
                jQuery('#buttonAddToCart').prop("disabled", true);

                try {
                    jQuery.ajax({
                        url: url,
                        dataType: 'json',
                        type: 'post',
                        data: data,
                        success: function (data) {

                            //this hides the processing .gif
                            jQuery('#ajax_loader').hide();

                            //this removes the 'disable' on the add to cart button
                            jQuery('#buttonAddToCart').prop('disabled', false);
                        }
                    });
                } catch (e) {
                }
                this.form.action = oldUrl;
            }
        }
    }
</script>

Answer 2

As an option, you can disable add to cart button after first click with JavaScript.

Answer 3

found this online.

<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>

then on html, adjust button tag to look like this:

 <button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>