Billing Address Same as Shipping Address jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Billing Address Same as Shipping Address jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#check-address').click(function(){
if ($('#check-address').is(":checked")) {
$('#txtfname_billing').val($('#txtfname').val());
$('#txtlname_billing').val($('#txtlname').val());
$('#txtaddress_billing').val($('#txtaddress').val());
$('#txtcity_billing').val($('#txtcity').val());
var country = $('#country option:selected').val();
$('#country_billing option[value=' + country + ']').attr('selected','selected');
} else { //Clear on uncheck
$('#txtfname_billing').val("");
$('#txtlname_billing').val("");
$('#txtaddress_billing').val("");
$('#txtcity_billing').val("");
$('#country_billing option[value=""]').attr('selected','selected');
};
});
});
</script>
</head>
<body>
<header class="bg-dark" style="height: 60px; padding: 5px;">
<h3 class="text-light" style="text-align: center;">Billing Address Same as Shipping Address jQuery</h3>
</header>
<div class="container bg-dark">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6 bg-light boxStyle">
<form name="theform" action="" method="post">
<div class="form-group">
<div class="width30 floatL"><label>Firstname</label></div>
<div class="width70 floatR"><input type="text" id="txtfname" name="txtfname" placeholder="First Name" class="form-control"></div><br><br>
</div>
<div class="form-group">
<div class="width30 floatL"><label>Lastname</label></div>
<div class="width70 floatR"><input type="text" id="txtlname" name="txtlname" placeholder="Last Name" class="form-control"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Address</label></div>
<div class="width70 floatR"><input type="text" id="txtaddress" name="txtaddress" placeholder="Ship to Address" class="form-control"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>City</label></div>
<div class="width70 floatR"><input type="text" id="txtcity" name="txtcity" placeholder="Ship to City" class="form-control"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Country</label></div>
<div class="width70 floatR"><select name="country" size="1" id="country" class="form-control">
<option value="">Select Country..</option>
<option value="Philippines">Philippines</option>
</select></div>
</div><br>
<hr/>
<p><b>Billing Information <label><input type="checkbox" value="" id="check-address">Same as billing?</label></b></p>
<div class="form-group">
<div class="width30 floatL"><label>Firstname</label></div>
<div class="width70 floatR"><input type="text" id="txtfname_billing" name="txtfname_billing" placeholder="First Name" class="form-control">
</div><br><br>
<div class="form-group">
<div class="width30 floatL"><label>Lastname</label></div>
<div class="width70 floatR"><input type="text" id="txtlname_billing" name="txtlname_billing" placeholder="Last Name" class="form-control"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Address</label></div>
<div class="width70 floatR"><input type="text" id="txtaddress_billing" name="txtaddress_billing" placeholder="Ship to Address" class="form-control"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>City</label></div>
<div class="width70 floatR"><input type="text" id="txtcity_billing" name="txtcity_billing" placeholder="Ship to City" class="form-control"></div>
</div><br>
<div class="form-group">
<div class="width30 floatL"><label>Country</label></div>
<div class="width70 floatR"><select name="country_billing" size="1" id="country_billing" class="form-control">
<option value="">Select Country..</option>
<option value="Philippines">Philippines</option>
</select></div>
</div><br>
<div class="form-group">
<div class="row">
<div class="floatR"><br/><input class="btn btn-success" type="submit" value="Submit" style="font-weight: bold"></div>
</div>
</div>
</form>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
</div>
</div>
<style>
.width30 {
width: 30%;
}
.width70 {
width: 70%;
}
.floatL{
float: left;
}
.floatR{
float: right;
}
.boxStyle{
padding: 20px;
border-radius: 25px;
border-top: 6px solid #dc3545;
border-bottom: 6px solid #28a745;
}
</style>
</body>
</html>
VIDEO
