Search code examples
javascriptjqueryrazorknockout.js

Knockoutjs checked binding function call issue

I am trying to call a function when the check box is checked and set the field values accordingly. The checkbox and the address fields are like below

<div class="form-check">
   <input class="form-check-input position-static" type="checkbox" id="SameAsShippingAddress" value="SameAsShippingAddress" data-bind="checked: sameAsShippingAddress" />
   <label>Check this box if Shipping Address and Billing Address are the same.</label>
 </div>
  
 <div class="row">
     <div class="col-md-6">
        <h4>Shipping Address:</h4>
           <div class="form-group required">
             <label for="EmailCompetitor" class="control-label">Email:</label>
             <input type="email" maxlength="150" id="EmailCompetitor" name="EmailCompetitor" class="form-control" data-bind="value: emailCompetitor" required />
            </div>

            <div class="form-group required">
              <label for="FirstNameCompetitor" class="control-label">First Name:</label>
              <input type="text" maxlength="150" id="FirstNameCompetitor" name="FirstNameCompetitor" class="form-control" data-bind="value: firstNameCompetitor" required />
            </div>
    </div>

    <div class="col-md-6">
       <h4>Billing Address:</h4>
       <div class="form-group required">
           <label for="EmailCompetitor_Billing" class="control-label">Email:</label>
           <input type="email" maxlength="150" id="EmailCompetitor_Billing" name="EmailCompetitor_Billing" class="form-control" data-bind="value: emailCompetitor_Billing" required />
        </div>

        <div class="form-group required">
           <label for="FirstNameCompetitor_Billing" class="control-label">First Name:</label>
           <input type="text" maxlength="150" id="FirstNameCompetitor_Billing" name="FirstNameCompetitor_Billing" class="form-control" data-bind="value: firstNameCompetitor_Billing" required />
        </div>
    </div>

I want the check box boolean value captured seperately as well as when check box is checked it needs to call the function. So in js I have like

var orderRequestFormViewModel = function () {
    var self = this;
    self.currentPage = ko.observable(1);
    self.referringPage = ko.observable();
     
    ...............
    self.sameAsShippingAddress = ko.observable().extend({ required: false });

    ..........
     self.sameAsShippingAddress = function () {
     if (this.checked) {
        $("#EmailCompetitor_Billing").val($("#EmailCompetitor").val());
        $("#FirstNameCompetitor_Billing").val($("#FirstNameCompetitor").val());
      } else {
        $("#EmailCompetitor_Billing").val("");
        $("#FirstNameCompetitor_Billing").val("");
    }
   }

But when the checkbox is checked/unchecked this function is not being called at all

enter image description here

I tried put the breakpoint but the function is not being it. New to this JS world, any help is greatly appreciated

Solution

  • Hey I made you a little snippet to show you that it works perfectly fine when using an observable and checked binding, when checkbox is checked, it is "true" if not it´s "false"

    To make custom stuff like setting .val() of other input just use a computed function, it will be called whenever isChecked changes

    var model = function () {
    var self = this;
    self.isChecked = ko.observable(false);
    self.doStuffWhenChecked = ko.computed(function(){
      if(self.isChecked()){
        $('#textinput').val("whatever");
      }else{
        $('#textinput').val("");
      }
    },this);
}

var vm = new model();
ko.applyBindings(vm);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label>Check this: </label>
<input type="checkbox" data-bind="checked: isChecked">
<span data-bind="visible: isChecked()"> Only show when checked </span>
<input type="text" id="textinput" >