0

I am trying to put a checkbox on the checkout page and need to display a message at the sidebar on the summary section. I am struggling with the binding of checkbox and span text. Please have a look at the code.

taxform.html

<div id="aw-taxexempt-container" data-bind="blockLoader: isLoading">
 <div class="col-mp mp-12" data-bind="attr: {for: 'place-order-taxexempt'}">
<h4 data-bind="i18n: 'Tax Exemption'"></h4>
<form id="aw-taxexempt-form" class="form">
<input type="checkbox" class="aw-taxexempt-checkbox" name="aw_taxexempt" 
       data-bind="checked: isTaxexempt, click: useTaxExempt, attr: {id: 'aw-taxexempt-checkbox'}"/>
<label data-bind="attr: {for: 'aw-taxexempt-checkbox'}">
    <span data-bind="i18n: 'Do you want to include tax exemption?'"></span>
</label>
</form>

tax-form.js

return Component.extend({

    defaults: {
        template: 'Aheadworks_Taxexempt/taxexempt_form'
    },
    initialize: function () {
        var self = this;    
        this._super();
        return this;
    },

    initObservable: function () {
        this._super()
            .observe({
                isTaxexempt: false,
                getTaxExemptMessage: 'not checked'
            });
        return this;
    },

    isLoading: isLoading,

    /**
     * Use tax exempt
     *
     */
    useTaxExempt: function () {
         if (this.isTaxexempt()) {
            this.getTaxExemptMessage('checkbox is checked');
        } else {
         this.getTaxExemptMessage('checkbox is not checked');
        }
        return true;
    },
   });
 });

tax-message.html

  <div class="block taxexempt-message">
   <span data-bind="text: getTaxExemptMessage()"></span>
  </div>

The getTaxExemptMessage is not updating the value while it is observable.

Thanks in advance.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.