Delphinidin

If you have ever purchased something online, you probably had to fill out a form by entering your billing address and shipping address. For most consumers, this information is the same, so such forms often have a Same As Billing Address check box that says “same as billing" that copies over all the form fields from billing to shipping, preventing the customer from needing to re-enter all of that information. This check box uses a copy field functionality. Not only does it save the customer time, but also reduces the likelihood of them mis-entering data. An example of a copy field check box on the checkout page of Best Buy's Web site (www.bestbuy.com).

The following script shows how to set up a copy field check box, which can be added to any form. It doesn't have to be a billing/shipping form, as it is in the following example.

1. Start off by creating a two sets of address input fields. The first set contains the billing address and the second set contains the shipping address. Add an input check box before the fields to control the copying of the fields from the billing to shipping.

<label>Copy Fields</label>
<input type="checkbox" id="copy-fields"/>
<div id="billing-address">
<h2>Billing Address</h2>
<label>First Name</label>
<input type="text" id="b-first-name"/>
<label>Last Name</label>
<input type="text" id="b-last-name"/>
</div>
<div id="shipping-address">
<h2>Shipping Address</h2>
<label>First Name</label>
<input type="text" id="s-first-name"/>
<label>First Name</label>
<input type="text" id="s-last-name"/>
</div>

2. Select the #copy-fields input element and attach a click event to it.

$('#copy-fields').bind('click', function(){
});

3. Add a variable for each field that you would like to copy over. Each variable stores the value for a field located within the billing address.

$('#copy-fields').bind('click', function(){
var billFName = $('#b-first-name').val();
var billLName = $('#b-last-name').val();
});

4. Create an if else statement to test whether the copy fields element is checked before performing any actions within the click event.

$('#copy-fields').bind('click', function(){
var billFName = $('#b-first-name').val();
var billLName = $('#b-last-name').val();
if (this.checked) {
}
else {
};
});

5. If the copy-fields element is checked, set the values of the corresponding shipping fields equal to their counterparts in the billing fields.

$('#copy-fields').bind('click', function(){
var billFName = $('#b-first-name').val();
var billLName = $('#b-last-name').val();
if (this.checked) {
$('#s-first-name').val(billFName);
$('#s-last-name').val(billLName);
}
else {
};
});

6. You need to set up an alternative option within the else statement that clears all the shipping input fields when the copy fields input is unchecked.

$('#copy-fields').bind('click', function(){
var billFName = $('#b-first-name').val();
var billLName = $('#b-last-name').val();
if (this.checked) {
$('#s-first-name').val(billFName);
$('#s-last-name').val(billLName);
}
else {
$('.shipping-address input').val('');
};
});