6

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)

Improve this question
4
  • 2
    What did you tried so far? Looking to hire a developer here? Commented Dec 10, 2015 at 6:27
  • @PraveenPrasannan hahaha, actually I am new to Angular Js and don't know where to start.. Commented Dec 10, 2015 at 6:28
  • Do you already have some codes then? 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 Commented Dec 10, 2015 at 6:30

5 Answers 5

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

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

2 Comments

i implemented it and its working fine, but while the page loads it removes my default value from the input element
Where are your default values, In the HTML or inside controller? Ideally, Inside the controller you should initialize your ng-model with default values. For example $scope.sa = {name:'Johnny'}; etc
6

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.

Improve this answer

2 Comments

What is not working? How are you running it? I mean, are you pasted it in a simple HTML page and opened that page in browser without any browser? If you click the Run code snippet above you can test it there itself.
I used something similar to this because I prefer to use the $watch expression in the controller
2

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

Improve this answer

1 Comment

it is better to call method here on ng-change rather than ng-click.
0

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

Improve this answer

Comments

0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.