mardi 24 mai 2016

Methods not firing immediately on change event

The code below two issues.

  1. When the user enters in the value 'coupon10' it removes the class 'disabled' and should unbind the click event which prevents the default behaviour, but it doesn't.

  2. The user has to enter a random string into the field, delete it, then enter 'coupon10' to enable the button. So the change event works, but only after entering an incorrect string. I need it to work first time.

Might I add that I am using Ember 1.4 (not by choice)

jQuery

  $(document).on('blur', 'input[name="coupon_code"]', function(){

    var form = $(this).closest('form');

    var couponBtn = form.find('input[name="apply_coupon"]');
    var couponCode = form.find('input[name="coupon_code"]');

    $(couponBtn).on('click', function(e){
        e.preventDefault();
        console.log('timmy2')
    });

    $(couponCode).change(function(){
      if($(couponCode).val() == 'coupon10') {    
          $(couponBtn).removeClass('disabled');
          $(couponBtn).unbind('click'); 
          console.log('winning');                
      } else if ($(couponCode).val() != 'coupon10') { 
          console.log('hello');
      }       
    });   

  });

HTML

<form name="ApplyCouponForm" method="post" action="/apply_coupon_check">
    <div class="form-row">

    </div>

    <input id="account_id" class="ember-view ember-text-field" type="hidden" name="account_id" value="11">

    <div class="form-row with-border">
      <div class="field w100">
        <label for="coupon_code">If your employer has introduced you to Social CareLine, enter below the coupon code </label>
        <input id="ember767" class="ember-view ember-text-field" type="text" name="coupon_code" required="required">
      </div>
 <input class="apply-coupon disabled button submit-button no-margin-top" type="submit" value="Apply Coupon" name="apply_coupon">   </div>
    <div class="clear"></div>

    <div class="form-row">
       </div></form>

CSS

.disabled {
  background: #dfdfdf!important;
  cursor: default!important;
  color: red;
}

.right-column .form-row {
  width: 518px; padding: 0px 0px; clear: both;
}

.submit-button {margin-top: 15px;}

.button.submit-button {
  padding: 8px 12px 8px 32px;
  background: #57d78d url("../images/submit-checkmark.png") no-repeat 10px center;
}

.right-column .main-submenu li.apply-coupon {
  background-image: url("../images/submenu-document.png");
}




Aucun commentaire:

Enregistrer un commentaire