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.
You can add as many fields as you want. just update the form and the javascript.
Here is the working demo
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 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>
Here is the working demo
Same as above with jQuery
![Same as above with jQuery]()
Reviewed by JS Pixels
on
October 25, 2013
Rating:
its working fine thank you!
ReplyDeleteNice Working Fine
ReplyDeleteIf you enter data for the top, check the box, then update the top again, the bottom isn't changed
ReplyDelete