CODEWITHSUNDEEP
javascriptmagentoe-commerceshopping-cart
Remy Nagelmaeker
Remy Nagelmaeker

Reputation: 215

Magento Theme adds product 2x to cart in IE (Javascript)

I've got a magento install with a custom theme that runs fine in Safari, Firefox and Chrome. In IE explorer all seems to work well too, it's just that when I add a product to cart it will add it 2x instead of just 1x.

I'm looking for someone with sufficient JS experience who would be able to help me with, or solve this problem.

To have a look. sbx.mujjo.com, on the frontpage hover a product thumbnail > click [quickview] > [add to cart].

Thanks! 

<form action="http://sbx.mujjo.com/checkout/cart/add/uenc/aHR0cDovL3NieC5tdWpqby5jb20vY2F0YWxvZy9hamF4X3Byb2R1Y3Qvdmlldy9pZC8yNQ,,/product/25/" method="post" class="addcart-form" id="product_addtocart_form">
    <fieldset>
        <input type="hidden" name="product" value="25">
        <input type="hidden" name="related_product" id="related-products-field" value="">
        <div class="cell">
            <label for="qty">Quantity</label>
            <!--<input type="text" class="quantity-text" name="qty" id="qty" maxlength="12" value="1" title="Qty"  /> -->
            <input type="text" class="quantity-text" name="qty" id="qty" maxlength="12" value="1" title="Qty">
        </div>
        <button type="button btn-checkout" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submitLight(this)"><span><span>Add to Cart</span></span></button>
    </fieldset>
</form>

Upvotes: 1

Views: 1328

Answers (1)

CCBlackburn
CCBlackburn

Reputation: 1704

I believe I know the problem, and it drives me nuts when people do this. As you can see from the code that I added to the question (once it's peer reviewed), it's pretty straight forward.

You have a normal form, with a few fields and a button. The button has an onclick event productAddToCartForm.submitLight(this), which I assume submits the form. What IE is doing is firing this javascript event and then reacting to the button being click. The reaction is to submit the form....hence the double up.

You can fix this in one of two ways:

  1. change the onclick event to productAddToCartForm.submitLight(this); return false; which tells the browser to stop any extra processing of the click event

  2. change the button to a href tag - something like 

    <a href="javascript:void();" onclick="productAddToCartForm.submitLight(this);"`

Edit: Forgot to mention one thing, this should still work in Safari, Chrome and FF

Upvotes: 2

Related Questions