1

On my checkout page I have a discount code form with the following Prototype script to reload the form with ajax and add the code value.

This is working fine, but I would also like to show a hidden div for both the onSuccess and onFailure.

I was wondering if anyone could help me here?

So here is the current script:

<script type="text/javascript">
//<![CDATA[
function updateCoupon(reqid) {
    var reqid;
    if(reqid == 2) {
        $('coupon_code').setValue('');
    }
    $('discount-coupon-form').request({
        method: 'post',
        onComplete: payment.onComplete,
        onSuccess: payment.onSave,
        onFailure: checkout.ajaxFailure.bind(checkout),
    })
}
//]]>
</script>

and the form that shows the discount-coupon-success and discount-copuon-failure divs to be revealed accordingly:

<form id="discount-coupon-form" action="<?php echo $this->getUrl('checkout/onepage/coupon') ?>" method="post">
    <div class="discount">
        <h2 style="font-weight: normal;">Discount Codes</h2>
        <div class="discount-coupon-success" style="display:none;">W00t!</div>
        <div class="discount-coupon-error" style="display:none;">Error</div>
        <div class="discount-form">
            <label for="coupon_code"> <?php echo $this->__('Enter coupon code (if you have one)') ?></label>
            <div class="input-box">
                <input class="input-text" id="coupon_code" name="coupon_code" value="<?php echo $getCouponCode; ?>"/>
            </div>
        <?php  if(strlen($getCouponCode)) { ?>
            <button type="button" class="cancelBtn" onclick="updateCoupon(2);" value="<?php echo $this->__('Cancel Coupon')?>"><span><?php echo $this->__('Cancel Coupon') ?></span></button>
        <?php } ?>
            <button type="button" class="button grey" onclick="updateCoupon(1);" value="<?php echo $this->__('Apply')?>"><span><?php echo $this->__('Apply') ?></span></button>
        </div>
    </div>
</form>
2

To hide the element with delay

Element.hide.delay(3, 'element-id');

here first parameter is time interval(i.e., right now 3 seconds) and second is element id.

To hide your divs after AJAX Success

$('discount-coupon-form').request({
        method: 'post',
        onComplete: payment.onComplete,
        onSuccess: function(){
            Element.hide.delay(3, 'your-success-msg-id');
            Element.hide.delay(3, 'your-error-msg-id');
            payment.onSave;
        },
    onFailure: checkout.ajaxFailure.bind(checkout),
})

To hide by class name

var hideDiv = $$('.your-class');
hideDiv.each(function(e){
    Element.hide.delay(3, e);
});

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.