Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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>
<meta charset="utf-8">
<title>Same as Above with Jquery</title>
<script src="">
function sameAsAbove(){
if($('#sameas').is(":checked")) {

<form name="address" method="post">
<input type="text" id="billing_name" name="billing_name"
placeholder="Billing Name" >
<textarea id="billing_address" name="billing_address"
placeholder="Billing Address"></textarea>
<input type="text" id="billing_zip" name="billing_zip"
placeholder="Billing Zip" >
<input type="checkbox" id="sameas" value="1" onclick="sameAsAbove()">
Same as Above <br>
<input type="text" id="shipping_name" name="shipping_name"
placeholder="Shipping Name">
<textarea id="shipping_address" name="shipping_address"
placeholder="Shipping Address"></textarea>
<input type="text" id="shipping_zip" name="shipping_zip"
placeholder="Shipping Zip" >

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.

This post first appeared on Altaf Hussain's Blog, please read the originial post: here

Share the post

Same as above with jQuery


Subscribe to Altaf Hussain's Blog

Get updates delivered right to your inbox!

Thank you for your subscription