In e-commerce site billing and shipping address are most important because if you want to give some gift to love one but you don’t want to show your identity or if you want to send product to your home but billing will come on your office address than billing and shipping address is playing a good role for selecting the same.
The billing address is always going to be the actual address of the person but person want to change the shipping address, it is possible if the website has given both options.
Below we are going to show both options. How to differentiate billing and shipping address into your e-commerce website?
 |
Step-1: HTML code for viewing html form
<div class="col-xs-12 col-sm-6">
<div class="form-group required">
<label for="InputZip">Pincode<sup>*</sup> </label>
<input required type="text" pattern="[0-9]*" class="form-control" name="Pincode" id="Pincode" placeholder="6 digit pincode" maxlength="6" onkeyup="postcode_validate(this.value);">
<span id="status"><font color="#FF0000"><b>Please enter a valid Pincode</b></font></span>
</div>
<div class="form-group required">
<label for="Name">Full Name <sup>*</sup> </label>
<input required type="text" class="form-control" id="Name" name="Name" placeholder="Full Name">
</div>
<div class="form-group required">
<label for="Address"> Complete Address <sup>*</sup> </label>
<textarea required type="text" rows="8" class="form-control" id="Address" name="Address" ></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group required">
<label for="Address">State <sup>*</sup> </label>
<select id="Address" name="Address" required class="form-control">
<option value="">Select State</option>
<?php
$queryPO = "SELECT * FROM state _list GROUP BY state ORDER BY state ASC ";
$resultPO = mysqli_query($mysqli_conn, $queryPO);
if(mysqli_num_rows($resultPO)>0) {
while($rowPO = mysqli_fetch_array($resultPO))
{
echo '<option value="'.$rowPO['state'].'">'.ucwords($rowPO['state']).'</option>';
}
}
?>
</select>
</div>
<div class="form-group required">
<label for="Address_InputDistrict">District <sup>*</sup> </label>
<select id="Address_district" name="Address_InputDistrict" class="form-control">
<option value="0">- Select -</option>
</select>
<!--<input required type="text" class="form-control" id="InputDistrict" name="InputDistrict" placeholder="State" >-->
</div>
<div class="form-group required">
<label for="Postoffice">Your nearest post office <sup>*</sup> </label>
<input required type="text" class="form-control" id="Postoffice" name="Postoffice" placeholder="Your nearest post office" >
</div>
<div class="form-group required">
<label for="City">City/Town <sup>*</sup> </label>
<input required type="text" class="form-control" id="City" name="City" placeholder="City/Town" >
</div>
<div class="form-group required">
<label for="InputMobile">Alternate Mobile phone <sup>*</sup> </label>
<input type="tel" name="AlternateMobile" class="form-control" id="AlternateMobile" value="" maxlength="10">
</div>
<div class="form-group required">
<input type="radio" name="defualt_value" value="" checked="checked"/> Make this my default address.
<!--<input type="checkbox" value="1" name="defualt_value" id="defualt_value" checked="checked">Make this my default address.-->
</div>
<div class="form-group required">
<font color="#FF0000"><b>Will your Billing and Shipping address same?</b></font><br />
<input type="radio" name="billship" id="Address" value="billing" onclick="javascript:radioWithBillingShipping('billing')" checked="checked" /> <b><label for="Address">Yes</label></b>
<input type="radio" name="billship" id="shippingAddress" value="shipping" onclick="javascript:radioWithBillingShipping('shipping')" unchecked /> <b><label for="shippingAddress">No</label></b>
<div id="billing" style="display:visible; text-align:left">
<br />Your Billing and Shipping address will be same.
</div>
</div>
</div>
<div id="shipping" style="display:none; text-align:left;">
<hr />
<h4><b>Your shipping address:</b></h4>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="form-group required">
<label for="Pincode">Pincode<sup>*</sup> </label>
<input required type="text" pattern="[0-9]*" class="form-control" name="Pincode" id="Pincode" placeholder="6 digit pincode" maxlength="6">
</div>
<div class="form-group required">
<label for="Name">Full Name <sup>*</sup> </label>
<input required type="text" class="form-control" id="Name" name="Name" placeholder="Full Name">
</div>
<div class="form-group required">
<label for="Address"> Complete Address <sup>*</sup> </label>
<textarea required type="text" rows="8" class="form-control" id="Address" name="Address" ></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group required">
<label for="address">State <sup>*</sup> </label>
<select id="address" name="address" required class="form-control">
<option value="">Select State</option>
<?php
$queryPO = "SELECT * FROM state_list GROUP BY state ORDER BY state ASC ";
$resultPO = mysqli_query($mysqli_conn, $queryPO);
if(mysqli_num_rows($resultPO)>0) {
while($rowPO = mysqli_fetch_array($resultPO))
{
echo '<option value="'.$rowPO['state'].'">'.ucwords($rowPO['state']).'</option>';
}
}
?>
</select>
</div>
<div class="form-group required">
<label for="address_InputDistrict">District <sup>*</sup> </label>
<select id="address_district" name="address_InputDistrict" class="form-control">
<option value="0">- Select -</option>
</select>
<!--<input required type="text" class="form-control" id="InputDistrict" name="InputDistrict" placeholder="State" >-->
</div>
<div class="form-group required">
<label for="Postoffice">Your nearest post office <sup>*</sup> </label>
<input required type="text" class="form-control" id="Postoffice" name="Postoffice" placeholder="Your nearest post office" >
</div>
<div class="form-group required">
<label for="City">City/Town <sup>*</sup> </label>
<input required type="text" class="form-control" id="City" name="City" placeholder="City/Town" >
</div>
<div class="form-group required">
<label for="InputMobile">Alternate Mobile phone <sup>*</sup> </label>
<input type="tel" name="AlternateMobile" class="form-control" id="AlternateMobile" value="" maxlength="10">
</div>
<div class="form-group required">
<input type="radio" name="defualt_value" value="shipping" /> Make this my default address.
<!--<input type="checkbox" value="1" name="defualt_value" id="defualt_value" checked="checked">Make this my default address.-->
</div>
<div class="form-group required">
<input type="submit" value="Save address" name="save" class="btn btn-primary btn-lg" >
</div>
</div>
</div>
</div>
Step-2: Javascript code
<script type="text/javascript" language="JavaScript">
function radioWithBillingShipping(x) {
document.getElementById('billing').style.display = "none";
document.getElementById('shipping').style.display = "none";
document.getElementById(x).style.display='inline';
}
</script>
