Coupon code form and show div onSuccess / onFailure

Question

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>

Answer 1

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);
});