General |  Social Media |  Miscellaneous
srcraft blog logo
  • Business
  • News
  • Shopping
  • Travel
  • Disease
  • Pets
  • Life
  • Health
  • Technology
  • Category
  • Contact Us
Latest Blog : 
☛ Best Europe cities to travel with Toddlers ☛ Make Your Limousine Ride Even More Special: 10 Top Ideas ☛ Leverage SEO Services to Secure Success for Your Storage Company ☛ Telerehab physical therapy : healing at your fingertips ☛ 10 Best Activities in India for Thrills and Relaxation ☛ Wedding Limos That Redefine Luxury Transportation ☛ Flying with Family: A Guide to Kid-Friendly Travel from Calgary to Kelowna ☛ How To Protect Your Privacy Online? [Complete Guide] ☛ Help and kindness is the biggest religion ☛ Burning bamboo wood is prohibited in the scriptures, Why 
Home > Innovation & Technology > Javascript

Choose shipping address same as billing address using javascript


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"/>&nbsp;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" />&nbsp;&nbsp;<b><label for="Address">Yes</label></b>

                &nbsp;&nbsp;&nbsp;&nbsp;

                                                <input type="radio" name="billship" id="shippingAddress" value="shipping" onclick="javascript:radioWithBillingShipping('shipping')" unchecked />&nbsp;&nbsp;<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" />&nbsp;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>             

Written By: Charles Miller Published in Javascript


Search

Publish your passions on srcraftblog.com

Latest Post

☛ Best Europe cities to travel with Toddlers

☛ Make Your Limousine Ride Even More Special: 10 Top Ideas

☛ Leverage SEO Services to Secure Success for Your Storage Company

☛ Telerehab physical therapy : healing at your fingertips

☛ 10 Best Activities in India for Thrills and Relaxation

☛ Wedding Limos That Redefine Luxury Transportation

☛ Flying with Family: A Guide to Kid-Friendly Travel from Calgary to Kelowna

☛ How To Protect Your Privacy Online? [Complete Guide]

☛ Help and kindness is the biggest religion

☛ Burning bamboo wood is prohibited in the scriptures, Why


We are accepting well-written informative Guest Posts on srcraftblog.com

Innovation & Technology

Artificial Intelligent blogs
Cryptocurrency blogs
Digital India blogs
Data science blogs
Neuroscience blogs
Programming blogs

Physical science

Physics blogs
Chemistry blogs
Earth science blogs
Geology blogs
Oceanography blogs
Meteorology blogs

Industry

Business blogs
Economy blogs
Freelancing blogs
Leadership blogs
Productivity blogs
Work blogs

Society

Basic income blogs
Education blogs
Environment blogs
Media blogs
Philosophy blogs
Women blogs
About us |  Write for us |  Terms and conditions |  Contact us

© 2023 SRCRAFT INIDA