The code below two issues.
- 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.
- 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