CODEWITHSUNDEEP
javascriptjqueryangularjs
krish
krish

Reputation: 1117

Binding one input value into another input

I have two input boxes.one for current address and another for permanant.
When I click on checkbox,current address value should be display on permanant address.

Similarly when I uncheck permanantAddress should be empty.But its not working.what I did wrong here?

var app=angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.init = function(){
  $('.sameAddress').change(function () {debugger
            if ($(this).prop('checked')) {
             $scope.data.permanantAddress = $scope.data.address;
            }
            })
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<form id="myForm" >
<div>
  <input type="text" ng-model="data.address">
</div>
<div><input type="checkbox" class="sameAddress"/><span>Permanant Address same as Current Address</span></div>
<div>
  <input type="text" ng-model="data.permanantAddress">
</div>
</form>

</div>

Upvotes: 0

Views: 839

Answers (2)

Kalaiselvan
Kalaiselvan

Reputation: 2134

no need for init function and jquery inside angular script

  var app=angular.module('myApp',[])
app.controller('myController',function($scope){

$scope.copyaddress=function(){
    if($scope.sameaddress_data){
          $scope.data.permanantAddress1 = $scope.data.address1;
          $scope.data.permanantAddress2 = $scope.data.address2;
          $scope.data.permanantAddress3 = $scope.data.address3;
    }else{
          $scope.data.permanantAddress1 = ""
          $scope.data.permanantAddress2 = ""
          $scope.data.permanantAddress3 = ""
    }
}
   
})
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="myController" ng-init="init()">
<form id="myForm" >
<div>
  <input type="text" ng-model="data.address1">
</div>
 <div>
  <input type="text" ng-model="data.address2">
</div>
 <div>
  <input type="text" ng-model="data.address3">
</div>
<div><input type="checkbox" ng-model="sameaddress_data" class="sameAddress"  ng-change="copyaddress()"/><span>Permanant Address same as Current Address</span></div>
<div>
  <input type="text" ng-model="data.permanantAddress1">
</div>
 <div>
  <input type="text" ng-model="data.permanantAddress2">
</div>
 <div>
  <input type="text" ng-model="data.permanantAddress3">
</div>
</form>
</div>

Upvotes: 3

Milan Chheda
Milan Chheda

Reputation: 8249

Here is a simple implementation having multiple fields, using JQuery (No Angular): 

$(".sameAddress").on("click", function() {
  var ship = $(this).is(":checked");
  $("[id^='permanent_']").each(function() {
    var tmpID = this.id.split('permanent_')[1];
    $(this).val(ship ? $("#" + tmpID).val() : "");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <div>
    <input type="text" id="first_name">
    <input type="text" id="last_name">
    <input type="text" id="address">
  </div>
  <div><input type="checkbox" class="sameAddress" /><span>Permanant Address same as Current Address</span></div>
  <div>
    <input type="text" id="permanent_first_name">
    <input type="text" id="permanent_last_name">
    <input type="text" id="permanent_address">
  </div>
</form>

Upvotes: 1

Related Questions