JavaScript: billing/shipping address copy Jul24 '05

Quite often web forms ask you for two addresses: billing, and shipping.

If the addresses are, in fact, the same (which they are in most cases), it’s aggravating to have to type the same address twice.

Smart web forms have a little check box, which says something like, "Same as billing?" And if you "check" that checkbox, your address is copied over to the shipping section, so you don’t have to type it twice.

This is an extremely important feature for developers to consistently include. Your customer is the number one priority, and if you can save them steps - by all means, do that.

How it’s done

From a developer’s standpoint, how does this "copy/paste" happen?

JavaScript provides a simple solution. Our example below will demonstrate.

Billing section

Below is example HTML code of the billing section of the form.

<legend>Billing Address</legend>
	
	<label for="billing_street">Street Address:</label>
	<input type="text" name="billing_street" id="billing_street" size="25" />
	
	<label for="billing_city">City:</label>
	<input type="text" name="billing_city" id="billing_city" size="25" />

<label for="billing_state">State:</label>
	<select name="billing_state" id="billing_state">
		<option>AL</option>
		<option>AK</option>
		<option>AZ</option>
		<option>AR</option>
		<option>CA</option>
		<option>CO</option>
		<option>CT</option>
		<option>DE</option>
		<option>DC</option>
		<option>FL</option>
		<option>GA</option>
		<option>GU</option>
		<option>HI</option>
		<option>ID</option>
		<option>IL</option>
		<option>IN</option>
		<option>IA</option>
		<option>KS</option>
		<option>KY</option>
		<option>LA</option>
		<option>ME</option>
		<option>MD</option>
		<option>MA</option>
		<option>MI</option>
		<option>MN</option>
		<option>MS</option>
		<option>MO</option>
		<option>MT</option>
		<option>NE</option>
		<option>NV</option>
		<option>NH</option>
		<option>NJ</option>
		<option>NM</option>
		<option>NY</option>
		<option>NC</option>
		<option>ND</option>
		<option>OH</option>
		<option>OK</option>
		<option>OR</option>
		<option>PA</option>
		<option>PR</option>
		<option>RI</option>
		<option>SC</option>
		<option>SD</option>
		<option>TN</option>
		<option>TX</option>
		<option>UT</option>
		<option>VT</option>
		<option>VA</option>
		<option>VI</option>
		<option>WA</option>
		<option>WV</option>
		<option>WI</option>
		<option>WY</option>
	</select>
	
	<label for="billing_zip">Zip Code:</label>
	<input type="text" name="billing_zip" id="billing_zip" size="15" />

</fieldset>

Shipping section

Below is example HTML code of the shipping section of the form.

<legend>Shipping Address</legend>
	
	<label for="same">Same as Billing Address?</label>
	<input type="checkbox" name="same" id="same" onClick="same_as_billing()" />
										
	<label for="shipping_street">Street Address:</label>
	<input type="text" name="shipping_street" id="shipping_street" size="25" />
	
	<label for="shipping_city">City:</label>
	<input type="text" name="shipping_city" id="shipping_city" size="25" />

<label for="shipping_state">State:</label>
	<select name="shipping_state" id="shipping_state">
		<option>AL</option>
		<option>AK</option>
		<option>AZ</option>
		<option>AR</option>
		<option>CA</option>
		<option>CO</option>
		<option>CT</option>
		<option>DE</option>
		<option>DC</option>
		<option>FL</option>
		<option>GA</option>
		<option>GU</option>
		<option>HI</option>
		<option>ID</option>
		<option>IL</option>
		<option>IN</option>
		<option>IA</option>
		<option>KS</option>
		<option>KY</option>
		<option>LA</option>
		<option>ME</option>
		<option>MD</option>
		<option>MA</option>
		<option>MI</option>
		<option>MN</option>
		<option>MS</option>
		<option>MO</option>
		<option>MT</option>
		<option>NE</option>
		<option>NV</option>
		<option>NH</option>
		<option>NJ</option>
		<option>NM</option>
		<option>NY</option>
		<option>NC</option>
		<option>ND</option>
		<option>OH</option>
		<option>OK</option>
		<option>OR</option>
		<option>PA</option>
		<option>PR</option>
		<option>RI</option>
		<option>SC</option>
		<option>SD</option>
		<option>TN</option>
		<option>TX</option>
		<option>UT</option>
		<option>VT</option>
		<option>VA</option>
		<option>VI</option>
		<option>WA</option>
		<option>WV</option>
		<option>WI</option>
		<option>WY</option>
	</select>
	
	<label for="shipping_zip">Zip Code:</label>
	<input type="text" name="shipping_zip" id="shipping_zip" size="15" />

</fieldset>

JavaScript code

Notice the name attribute of each <input> element. We will be referring to those names in our script. Also, in the shipping section, notice the first <input> element is the checkbox that asks, "Same as Billing Address?" That <input> element has an attribute called onClick, with a value of same_as_billing(), which is a function that will perform the copy/paste.

The function can be placed anywhere your other JavaScript scripts are placed. Or, if you'd rather keep it to a "page level," go ahead and insert this code anywhere in the page:

This function, same_as_billing() simply goes in and uses the values already present in the billing form, and places them into the same fields in the shipping form.

And, remember, this only happens when the user clicks on the checkbox in the shipping form. The onClick is the event that triggers the copy/paste.

Checked, or not?

Now... what if the user initially checks the box, but then decides that later that she wants it unchecked?

We have to make sure that any information already copied to the Shipping section gets erased.

This is already included in the function.

Example

Enter an address in the fields below:

Toggle the checkbox, and watch the information get copied over - or erased.

More efficient JavaScript

If anyone knows a more efficient way to achieve the same result, please let me know. I know my JavaScript skills aren’t that efficient yet.

Categories: JavaScript , Tutorials

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info Name: Email (will not show on page):

Follow new comments via email? (You can turn this off any time)

Do you want your comments emailed to yourself?

Home Page (optional):

I use a similar method .. However the only thing I cannot figure out is how to make the second options menu for shipping_state to have an equal sel ... Read more.

Excellent! I was looking for something just like this for a long time. Works perfectly, thanks for sharing! ... Read more.

Nice and clean! Thanks :) ... Read more.

Your script doesn't work for me! Works on your example, but your example has a different script. You have two forms and give each a different name, ... Read more.

To get the state from the drop down to copy use 'selectedIndex' instead of value in the copy function for state. ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from a suburb of Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.