Cart coupon code form isn't working after AJAX refresh

Question

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

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