General |  Social Media |  Miscellaneous
Login
srcraft blog logo
  • Business
  • News
  • Shopping
  • Travel
  • Disease
  • Pets
  • Life
  • Health
  • Technology
  • Category
  • Contact Us
Latest Blog : 
☛ Save Trees to Save Your Children Life ☛ Importance of practice: A story of Gurukul ☛ Cowards never remember a favor and the brave never forget a favor ☛ The true story: One and Half Ticket ☛ ghhjhjh ☛ Don't mess with health, let's know some important things related to health ☛ How was Shani Dev born and how was his vision crooked? ☛ Story of creation of man, hunger and thirst? ☛ Why is it advised to eat garlic on an empty stomach? ☛ Indian Culture: Wisdom of sages 
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

☛ Save Trees to Save Your Children Life

☛ Importance of practice: A story of Gurukul

☛ Cowards never remember a favor and the brave never forget a favor

☛ The true story: One and Half Ticket

☛ Don't mess with health, let's know some important things related to health

☛ How was Shani Dev born and how was his vision crooked?

☛ Story of creation of man, hunger and thirst?

☛ Why is it advised to eat garlic on an empty stomach?

☛ Indian Culture: Wisdom of sages

☛ Untold Story: Last debt pyre wood


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