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

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>

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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related