In this article, we will tell you how to copy billing address to 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-columns first one is the billing address, and the second one shipping address using bootstrap. after we will add the field in the 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 the billing address copy to the shipping address.
Now, you
<!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:
