Skip to content
  • About Us
  • Contact Us
  • Privacy Policy
  • Terms & Conditions
  • Site Map

XpertPhp

Expertphp Is The Best Tutorial For Beginners

  • Home
  • Javascript
    • Jquery
    • React JS
    • Angularjs
    • Angular
    • Nodejs
  • Codeigniter
  • Laravel
  • Contact Us
  • About Us
  • Live Demos
Copy Billing address to Shipping address using Jquery

Copy Billing address to Shipping address using Jquery

Posted on October 13, 2019January 19, 2020 By XpertPhp No Comments on Copy Billing address to Shipping address using Jquery

In this article, we will tell you how to copy the billing address to the shipping address using jquery. When a customer purchases any product at that time we need this example because most of the customer billing addresses and the shipping address are the same.

Now, we will create two-column first one is billing address and second one shipping address using the bootstrap. after, we will add the field in a first column and the second column like as billing address, street, city, country, email, mobile.. etc. but here fields name and id name are different.

When the customer entered the billing address and the customer goes to enter the shipping address, the customer will click on the “Same as Billing Address” checkbox that time will become billing address copy to the shipping address.

Now, you

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Copy billing address to shipping address using Jquery - XpertPhp</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
$('#copy_address').click(function(){
if($('input[name="copy_address"]').is(':checked')){
$('#shipping_address').val($('#billing_address').val());
$('#shipping_street').val($('#billing_street').val());
$('#shipping_city').val($('#billing_city').val());
$('#shipping_email').val($('#billing_email').val());
$('#shipping_mobile').val($('#billing_mobile').val());
var country = $('#billing_country option:selected').val();
if(country !="")
{
$('#shipping_country option[value="' + country + '"]').prop('selected', true);
}
} else {
$('#shipping_address').val("");
$('#shipping_street').val("");
$('#shipping_city').val("");
$('#shipping_email').val("");
$('#shipping_mobile').val("");
$('#shipping_country option:eq(0)').prop('selected', true);
};
 
});
});
</script>
</head>
<body>
 
<div class="container">
  <form class="form-horizontal" action="/action_page.php">
  <div class="row">
   <div class="col-lg-6">
<div class="form-group"><center><h3>Billing Address</h3></center></div>
<div class="form-group">
          <label class="control-label col-sm-2" for="billing_address">Billing Address:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="billing_address" placeholder="Enter Billing Address" name="billing_address">
          </div>
        </div>
<div class="form-group">
          <label class="control-label col-sm-2" for="billing_street">Street:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="billing_street" placeholder="Enter Street" name="billing_street">
          </div>
        </div>
<div class="form-group">
          <label class="control-label col-sm-2" for="billing_city">City:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="billing_city" placeholder="Enter City" name="billing_city">
          </div>
        </div>
<div class="form-group">
          <label class="control-label col-sm-2" for="billing_country">Country:</label>
          <div class="col-sm-10">
            <select id="billing_country" name="billing_country" class="form-control">
<option> - select country - </option>
<option value="india">India</option>
<option value="usa">USA</option>
<option value="africa">Africa</option>
</select>
          </div>
        </div>
     <div class="form-group">
          <label class="control-label col-sm-2" for="billing_email">Email:</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="billing_email" placeholder="Enter email" name="billing_email">
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="billing_mobile">Mobile:</label>
          <div class="col-sm-10">          
            <input type="number" class="form-control" id="billing_mobile" placeholder="Enter Mobile Number" name="billing_mobile">
          </div>
        </div>
    </div>
<div class="col-lg-6">
<div class="form-group"><center><h3>Shipping Address</h3></center></div>
<div class="form-group">        
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label><input type="checkbox" id="copy_address" name="copy_address"> Same as Billing Address</label>
            </div>
          </div>
        </div>
     <div class="form-group">
          <label class="control-label col-sm-2" for="shipping_address">Shipping Address:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="shipping_address" placeholder="Enter Shipping Address" name="shipping_address">
          </div>
        </div>
<div class="form-group">
          <label class="control-label col-sm-2" for="shipping_street">Street:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="shipping_street" placeholder="Enter Street" name="shipping_street">
          </div>
        </div>
<div class="form-group">
          <label class="control-label col-sm-2" for="shipping_city">City:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="shipping_city" placeholder="Enter City" name="shipping_city">
          </div>
        </div>
<div class="form-group">
          <label class="control-label col-sm-2" for="shipping_country">Country:</label>
          <div class="col-sm-10">
            <select id="shipping_country" name="shipping_country" class="form-control">
<option> - select country - </option>
<option value="india">India</option>
<option value="usa">USA</option>
<option value="africa">Africa</option>
</select>
          </div>
        </div>
     <div class="form-group">
          <label class="control-label col-sm-2" for="shipping_email">Email:</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="shipping_email" placeholder="Enter email" name="shipping_email">
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="shipping_mobile">Mobile:</label>
          <div class="col-sm-10">          
            <input type="number" class="form-control" id="shipping_mobile" placeholder="Enter Mobile Number" name="shipping_mobile">
          </div>
        </div>
    </div>
  </div>    
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
</div>
 
</body>
</html>

can see following below code

 

Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon

Recommended Posts:

  • allow only numbers in textbox jquery on keypress
  • Codeigniter CRUD Operation With Ajax Example
  • CodeIgniter Upload Image File with preview using Jquery Ajax
  • How to Disable cut, copy and paste using jquery
  • FullCalendar with Event Modal Dialog Example
Jquery Tags:jquery tutorial

Post navigation

Previous Post: How to Check If Value Exists in a Javascript Array
Next Post: Javascript string to array by split() method

Categories

  • Ajax
  • Angular
  • Angularjs
  • Bootstrap
  • Codeigniter
  • Css
  • Htaccess
  • Javascript
  • Jquery
  • Laravel
  • MongoDB
  • MySql
  • Nodejs
  • Php
  • React JS
  • Shopify Api
  • Ubuntu

Tags

angular 10 tutorial angular 11 ci tutorial codeigniter 4 image upload Codeigniter 4 Tutorial codeigniter tutorial CodeIgniter tutorial for beginners codeigniter with mysql crud operation eloquent relationships file upload File Validation form validation Image Upload jQuery Ajax Form Handling jquery tricks jquery tutorial laravel 6 Laravel 6 Eloquent Laravel 6 Model laravel 6 relationship laravel 6 relationship eloquent Laravel 6 Routing laravel 7 Laravel 7 Eloquent laravel 7 routing laravel 7 tutorial Laravel 8 laravel 8 example laravel 8 tutorial laravel 9 example laravel 9 tutorial Laravel Framework laravel from scratch Laravel Socialite laravel social login nodejs pagination payment gateway php with mysql react js tutorial rewrite rule send mail validation wysiwyg editor

Latest Posts

  • How to Convert Date and Time from one timezone to another in php
  • how to get current date and time in php
  • Drag and Drop Reorder Items with jQuery, PHP & MySQL
  • Laravel 9 Toastr Notifications Example Tutorial
  • Laravel 9 CRUD Operation Example Using Google Firebase
  • Laravel 9 CKeditor Image Upload With Example
  • Laravel 9 Summernote Image Upload With Example
  • Laravel 9 Stripe Payment Gateway Integrate Example
  • How To Send Email Using Mailtrap In Laravel 9
  • Laravel 9 Fullcalendar Ajax Example Tutorial

Tools

  • Compound Interest Calculator
  • Hex to RGB Color Converter
  • Pinterest Video Downloader
  • Age Calculator Online
  • Convert JSON to PHP Array Online
  • JavaScript Minifier
  • CSS Beautifier
  • CSS Minifier
  • JSON Beautifier
  • JSON Minifier

Copyright © 2018 - 2022,

All Rights Reserved Powered by XpertPhp.com