0

I am working to make the cart to work with AJAX, for update or remove products from the cart, the problem I am facing is that for some strange reason the onclick HTML attribute isn't working after the complete AJAX "reload" of the cart and well I could not find the problem for this, I tried to restore the onclick function and it didn't work.

Here is the HTML code for the form:

<form id="discount-coupon-form" action="http://proyecto-c.pengostores.mx/checkout/cart/couponPost/" method="post">
<div class="discount">
    <h2>Código de cupón</h2>
    <div class="discount-form">
        <label for="coupon_code">Código de cupón</label>
        <input type="hidden" name="remove" id="remove-coupone" value="0">
        <div class="field-wrapper">
            <input class="input-text" type="text" id="coupon_code" name="coupon_code" value="">
            <div class="button-wrapper">
                <button type="button" title="Canjear" class="button2" onclick="discountForm.submit(false)" value="Canjear"><span><span>Canjear</span></span></button>
                                </div>
        </div>
    </div>
</div>
</form>

And the script that instanciate the funciton on the onclick attribute:

    <script type="text/javascript">
var discountForm = new VarienForm('discount-coupon-form');
discountForm.submit = function (isRemove) {
    if (isRemove) {
        $('coupon_code').removeClassName('required-entry');
        $('remove-coupone').value = "1";
    } else {
        $('coupon_code').addClassName('required-entry');
        $('remove-coupone').value = "0";
    }
    return VarienForm.prototype.submit.bind(discountForm)();
}
</script>

And it looks like the form isn't getting validated or something. Any help is appreciated, thanks

  • Show us your controller action. – Lord Skeletor Jan 9 '15 at 22:30
  • Literally what we return is this checkout.cart block as HTML like this: /** * function to get the checkout.cart block as html * @return string || null */ protected function _initCart() { $this->loadLayout(); $cart = $this->getLayout()->getBlock('checkout.cart'); if(is_object($cart)){ return $cart->toHtml(); }else{ return null; } } – apz2000 Jan 12 '15 at 15:57
1

After cart reload you should again assign discountForm var, because your form is lost and new form is rendered (I assume because don't know, you wrote "complete reload cart"). And then attach submit function again.

discountForm = new VarienForm('discount-coupon-form');
discountForm.submit = function (isRemove) {
if (isRemove) {
    $('coupon_code').removeClassName('required-entry');
    $('remove-coupone').value = "1";
} else {
    $('coupon_code').addClassName('required-entry');
    $('remove-coupone').value = "0";
}
return VarienForm.prototype.submit.bind(discountForm)();
}

Add it to your reload function (ajax callback function?). Of course don't duplicate the code, first define var discountForm; as empty and then extract above snippet as a function and call it on body load and on ajax load.

  • Hi @mkutyba thanks for the response, I have tried that solution but it isn't working, I tried making that on the Chrome console and the form worked but not if I make it on the success action of the ajax call, why could be that? Because the var discountForm is in another scope? Thanks again – apz2000 Jan 12 '15 at 16:56
  • I get it working, your answer is in part right but not completely, what I needed to do to make it working was reinit all the javascript that is defined on the <script type="text/javascript"> but the discountForm var without the var before the init. Thanks – apz2000 Jan 12 '15 at 17:11
  • 1
    Yes, I made a mistake, the submit event handler must be reinitialized too. – mkutyba Jan 13 '15 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.