Binding one input value into another input

Question

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>

Possible duplicate of AngularJS: Copy the value of one input box to another input box only if checkbox is checked — Milan Chheda
– Milan Chheda, Commented Nov 29, 2017 at 4:36

Kalaiselvan · Accepted Answer · 2017-11-29 04:57:30Z

3

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>

edited Nov 29, 2017 at 4:57

answered Nov 29, 2017 at 4:19

Kalaiselvan

2,1441 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

krish Over a year ago

if more than one field means?how can I do

Milan Chheda · Accepted Answer · 2017-11-29 04:47:38Z

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>

Collectives™ on Stack Overflow

Binding one input value into another input

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related