Same as above with jQuery

We often see a checkbox on mostly ecommerce websites which serves the purpose to clone billing address as shipping address OR shipping address as billing address.

This helps user to fill the form once and use the filled address as another address.
The idea is to just clone the data from one field to another which is quite easy.

Let us implement it with jQuery.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Same as Above with Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
    <script>
    function sameAsAbove(){    
      if($('#sameas').is(":checked")) {
            $("#shipping_name").val($("#billing_name").val());
            $("#shipping_address").val($("#billing_address").val()); 
            $("#shipping_zip").val($("#billing_zip").val()); 
      }else{
            $("#shipping_name").val('');
            $("#shipping_address").val('');
            $("#shipping_zip").val('');
          }
    }
    </script>
    </head>
    
    <body>
    <form name="address" method="post">
      <input type="text" id="billing_name" name="billing_name" 
      placeholder="Billing Name" >
      <br>
      <textarea id="billing_address" name="billing_address" 
      placeholder="Billing Address"></textarea>
      <br>
      <input type="text" id="billing_zip" name="billing_zip" 
      placeholder="Billing Zip" >
      <br>
      <br>
      <input type="checkbox" id="sameas" value="1" onclick="sameAsAbove()">
      Same as Above <br>
      <br>
      <input type="text" id="shipping_name" name="shipping_name" 
      placeholder="Shipping Name">
      <br>
      <textarea id="shipping_address" name="shipping_address" 
      placeholder="Shipping Address"></textarea>
      <br>
      <input type="text" id="shipping_zip" name="shipping_zip" 
      placeholder="Shipping Zip" >
    </form>
    </body>
    </html>

You can add as many fields as you want. just update the form and the javascript.
Here is the working demo
  
Same as Above
In the above demo when you fill the billing form and click on checkbox it fills shipping fields with billing fields and when you uncheck, it resets the fields.
Same as above with jQuery Same as above with jQuery Reviewed by JS Pixels on October 25, 2013 Rating: 5

3 comments:

  1. its working fine thank you!

    ReplyDelete
  2. If you enter data for the top, check the box, then update the top again, the bottom isn't changed

    ReplyDelete

Altaf Web. Powered by Blogger.