0

I have a form that has a text field that is a required entry for one(1) of my two(2) buttons. The first(1st) button applies a code, in the text field, to the products in the cart section of my store. The second(2nd) removes all codes from all products in the cart section.

What's the best way of going about this?

Thx.

<div id="cart-coupon-menu" class="coupon-menu-hide">
<form id="discount-coupon-form" action="<?php echo $this->getUrl('checkout/cart/couponPost') ?>" method="post">
    <div class="discount">
        <div class="discount-form">
            <input type="hidden" name="remove" id="remove-coupone" value="0" />
            <div class="input-box">
                <input class="input-text" id="coupon_code" name="coupon_code" value="<?php echo $this->escapeHtml($this->getCouponCode()) ?>" placeholder="Enter a Coupon or Promo Code" autocomplete="off"/>
            </div>
            <div class="buttons-set">
                <button type="button" title="<?php echo $this->__('Apply Coupon') ?>" class="button" onclick="discountForm.submit(false)" value="<?php echo $this->__('Apply Coupon') ?>"><span><span><?php echo $this->__('Apply Coupon') ?></span></span></button>
                <button type="button" title="<?php echo $this->__('Cancel Coupon') ?>" class="button" onclick="discountForm.submit(true)" value="<?php echo $this->__('Cancel Coupon') ?>"><span><span><?php echo $this->__('Cancel Coupon') ?></span></span></button>
            </div>
        </div>
    </div>
</form>
</div>

The above form will be serialized and set to a controller via AJAX and an appropriate response will be returned.

When the input box is null I want the input box to act as a required field and disallow submission via the first button. However, when it is null the second button should still allow for submission. When text is entered into the input box they both behave normally.

Currently i'm attempting to do something like this:

<script type="text/javascript">
    //<![CDATA[
    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";
        }
        if(something where I identify if it is required and the field is null){return null;}
        else{continue with ajax call;}
4
  • Not very clear. It would be better if you show some demo or code. Commented Dec 31, 2014 at 21:08
  • @SampathLiyanage I'll make some editions to my question, give me a second. Commented Dec 31, 2014 at 21:09
  • Is the trouble you're having that you can't differentiate between the buttons that are pressed?
    – xbakesx
    Commented Dec 31, 2014 at 21:13
  • @xbakesx on click they're both calling the same function (which is an ajax call). The only difference is the boolean function parameter. I want to make the text field required ONLY for the first button press. But in the function call they'll both pass that parameter anyway. In the cancel button case the text field parameter can be anything, even ''. In the apply button case I want it to be anything BUT ''. Commented Dec 31, 2014 at 21:22

2 Answers 2

1

I think it's just a simple javascript something like:

<button type="button" title="<?php echo $this->__('Apply Coupon') ?>" class="button" onclick="isValid() ? discountForm.submit(false) : handleInvalid()" value="<?php echo $this->__('Apply Coupon') ?>"><span><span><?php echo $this->__('Apply Coupon') ?></span></span></button>

I used a ternary operator in there... so basically it says if isValid() returns true, execute: discountForm.submit(false) otherwise execute: handleInvalid().

Then the javascript functions would be:

function isValid() {
    var couponCode = document.getElementById('coupon_code').value;

    return /* whatever logic you want here... */
}

function handleInvalid() {
    // do whatever you want to the coupon_code input to indicate it's required and pop up an error message
    alert("Please enter a coupon code!");
}
-1

You should give knockout a try. It updates your view(html) according to changes in your js code. See this example.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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