javascript - AngularJS: Copy the value of one input box to another input box only if checkbox is checked

I am working on the shopping cart where person needs to fill 2 similar form on the same page. First form is Billing Address and Second form is Shipping Address. Both the forms contains similar input elements for example:

a) Billing Address: Name, Address Line 1, Address Line 2, Country, Phone etc.

b) Shipping Address: Name, Address Line 1, Address Line 2, Country, Phone etc.

There is a checkbox which says "Check if billing address and shipping address is same". So, if only when checkbox is checked I need to copy the data from billing address to shipping address, even if user makes change in the billing address it should automatically copy the changes to shipping address.

I need to do this using Angular JS. Can some body please tell me how to do this?

(Edit: I am new to Angular Js and don't know where to start)

a) Billing Address: Name, Address Line 1, Address Line 2, Country, Phone etc.

b) Shipping Address: Name, Address Line 1, Address Line 2, Country, Phone etc.

I need to do this using Angular JS. Can some body please tell me how to do this?

(Edit: I am new to Angular Js and don't know where to start)

Share Improve this question edited Dec 10, 2015 at 6:29 asked Dec 10, 2015 at 6:23 D555 1,8406 gold badges28 silver badges51 bronze badges

2 What did you tried so far? Looking to hire a developer here? – Praveen Prasannan Commented Dec 10, 2015 at 6:27
@PraveenPrasannan hahaha, actually I am new to Angular Js and don't know where to start.. – D555 Commented Dec 10, 2015 at 6:28
Do you already have some codes then? – Jia Jian Goi Commented Dec 10, 2015 at 6:29
@JiaJian all php, html code is ready but not angular js code as I don't know how to start – D555 Commented Dec 10, 2015 at 6:30

Add a comment |

5 Answers 5

Sorted by: Reset to default 6

You can define two section in your form. One for shipping address and other for billing address. In the billing address add a checkbox for same address.

You then need to handle following cases

Copy shipping address to billing address object if checkbox is checked.
Disable editing of billing address if checkbox is checked.
If any field from shipping address is modified with checkbox checked copy it to billing address object.

Here is the example

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Example - example-example32-production</title>
      
    </head>
    
    <body ng-app="formExample">
      <div ng-controller="ExampleController">
        <form novalidate class="simple-form">
          <h3>Shipping Address</h3> Name:
          <input type="text" ng-model="sa.name" ng-change="sameAddress && update()" />
          <br /> Street:
          <input type="text" ng-model="sa.street" ng-change="sameAddress && update()" />
          <br /> City:
          <input type="text" ng-model="sa.city" ng-change="sameAddress && update()" />
          <br /> State:
          <input type="text" ng-model="sa.state" ng-change="sameAddress && update()" />
          <br /> Pin:
          <input type="text" ng-model="sa.pin" ng-change="sameAddress && update()" />
          <br /> Mobile:
          <input type="text" ng-model="sa.mobile" ng-change="sameAddress && update()" />
          <br />
          <br />
    
          <h3>Billing Address</h3> Name:
          <input type="text" ng-model="ba.name" ng-disabled="sameAddress" />
          <br /> Street:
          <input type="text" ng-model="ba.street" ng-disabled="sameAddress" />
          <br /> City:
          <input type="text" ng-model="ba.city" ng-disabled="sameAddress" />
          <br /> State:
          <input type="text" ng-model="ba.state" ng-disabled="sameAddress" />
          <br /> Pin:
          <input type="text" ng-model="ba.pin" ng-disabled="sameAddress" />
          <br /> Mobile:
          <input type="text" ng-model="ba.mobile" ng-disabled="sameAddress" />
          <br />
          <input type="checkbox" ng-model="sameAddress" ng-change="sameAddress && update()" />Same as Shipping Address Address
          <br />
    
        </form>
    
      </div>
    
      <script>
        angular.module('formExample', [])
          .controller('ExampleController', ['$scope', function($scope) {
            $scope.sa = {};
            $scope.ba = {};
    
            $scope.update = function(sa) {
              $scope.ba = angular.copy($scope.sa);
            };
    
          }]);
      </script>
    </body>
    
    </html>

Here is the Plnkr

Here you go. I'm providing you a simplified solution.

// Code goes here

var myApp = angular.module('myApp', []);

myApp.controller('FooCtrl', function($scope) {

    $scope.billing = {};
    $scope.shipping = {};

    $scope.copyAddresses = function() {
        if ($scope.copyAddress) {
            $scope.shipping = angular.copy($scope.billing);
        }
    }

    $scope.$watch('billing', function(newValue) {
        if (newValue) {
            $scope.copyAddresses();
        }
    }, true);
});

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body class="container" ng-controller="FooCtrl">
<h1>Hello Plunker!</h1>

<div class="well well-sm">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-xs-3">Address 1</label>
            <div class="col-xs-6">
                <input type="text" ng-model="billing.address1" class="form-control input-sm"/>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-3">Address 2</label>
            <div class="col-xs-6">
                <input type="text" ng-model="billing.address2" class="form-control input-sm"/>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-3">City</label>
            <div class="col-xs-6">
                <input type="text" ng-model="billing.city" class="form-control input-sm"/>
            </div>
        </div>
    </form>
</div>

<div class="checkbox">
    <label>
        <input type="checkbox" ng-model="copyAddress" ng-change="copyAddresses()"/>
        Check if billing address and shipping address is same
    </label>
</div>

<div class="well well-sm">
    <form class="form-horizontal">
        <fieldset ng-disabled="copyAddress">
            <div class="form-group">
                <label class="control-label col-xs-3">Address 1</label>
                <div class="col-xs-6">
                    <input type="text" ng-model="shipping.address1" class="form-control input-sm"/>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-3">Address 2</label>
                <div class="col-xs-6">
                    <input type="text" ng-model="shipping.address2" class="form-control input-sm"/>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-xs-3">City</label>
                <div class="col-xs-6">
                    <input type="text" ng-model="shipping.city" class="form-control input-sm"/>
                </div>
            </div>
        </fieldset>
    </form>
</div>
</body>
</html>

This will copy all the billing address to shipping address on the click of that checkbox and as you start typing, that will update the shipping address also if the checkbox is checked.

HTML:

    <div ng-controller="MyCtrl">
    <div>
      Billing address
      Address <input type="text" ng-model="billing.Address" />
    </div>
      <div>
      Shipping address
      Address <input type="text" ng-model="Shipping.Address" />
    </div>
    <div>
      Shipping address is same as billing address
      <input type="checkbox" ng-click="CheckClicked()" ng-model="SameAddress" />
    </div>
    </div>

Controller:

 myApp.controller('MyCtrl', function($scope) {
    $scope.CheckClicked = function(){
    debugger;
      if($scope.SameAddress){
        $scope.Shipping = $scope.billing;
      }
      else{
        $scope.Shipping = angular.copy($scope.Shipping);
      }
    };
    });

Fiddle

The idea is like you can use two scope variables for your BillingAddress and ShippingAddress.

Then you can use 'ng-checked' attribute in your checkbox to fetch the checked event, if the model associated with the checkbox is true, you have to replace the ShippingAddress AddressLine2 with the BillingAddress AddressLine2

Try This:

<input type="text" ng-model="box1">
 <input type="text" ng-model="box2">
 <input type="checkbox" ng-model="active" ng-change="copyIt(active)">

JS:

function MyCtrl($scope) {
   $scope.box1="";
   $scope.copyIt = function (active) {
     if(active){
        $scope.box2 = $scope.box1;
    }   else {
        $scope.box2="";
       }
  }
}

Fiddle

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - AngularJS: Copy the value of one input box to another input box only if checkbox is checked - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)