When a customer buys any product then we need this example because most of the customer payment addresses and shipping address are the same.
#example.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP & Jquery Tutorial</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="">
<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>When the customer enters the billing address and the customer enters the shipping address, the customer will click on the “Same as Payment Address” check box then it will be a copy of the billing address to the shipping address.