Copy Billing address to Shipping address using Jquery

October 13, 2019 XpertPhp Comments 0 Comment

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

<!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>

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>

<head>

<title>Copy billing address to shipping address using Jquery - XpertPhp</title>

$(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="form-group"><center><h3>Billing Address</h3></center></div>

<label class="control-label col-sm-2" for="billing_address">Billing Address:</label>

</div>

<label class="control-label col-sm-2" for="billing_street">Street:</label>

</div>

</div>

<label class="control-label col-sm-2" for="billing_country">Country:</label>

<option> - select country - </option>

<option value="india">India</option>

<option value="africa">Africa</option>

</select>

</div>

<label class="control-label col-sm-2" for="billing_email">Email:</label>

</div>

<label class="control-label col-sm-2" for="billing_mobile">Mobile:</label>

</div>

<div class="form-group"><center><h3>Shipping Address</h3></center></div>

<label><input type="checkbox" id="copy_address" name="copy_address"> Same as Billing Address</label>

</div>

<label class="control-label col-sm-2" for="shipping_address">Shipping Address:</label>

</div>

<label class="control-label col-sm-2" for="shipping_street">Street:</label>

</div>

</div>

<label class="control-label col-sm-2" for="shipping_country">Country:</label>

<option> - select country - </option>

<option value="india">India</option>

<option value="africa">Africa</option>

</select>

</div>

<label class="control-label col-sm-2" for="shipping_email">Email:</label>

</div>

<label class="control-label col-sm-2" for="shipping_mobile">Mobile:</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</div>

</form>

</div>

</body>

</html>

can see following below code