///Copying Billing Form Fields Into Shipping Fields

Copying Billing Form Fields Into Shipping Fields

Copying Billing Form Fields Into Shipping Fields

This technique is commonly used on professional order forms.

It lets customers click something to automatically fill in shipping information without retyping identical information already provided in billing form fields. Or vice versa.

Its use need not be limited to only that. Examples of other uses are:

• Filling home telephone number field from the work telephone number field.

• Filling spouse information fields from prior form fields.

Use it for form fields that could require information identical to that already provided elsewhere on the form.

A click is easier than retyping information.

How To Do It

Below is a working example. Paste it into a test web page to try it out.

The example contains a form and the JavaScript to do the automatic copying from fields to other fields. The JavaScript can be anywhere on the web page — above the form, below the form, or even in the HEAD area.

<!-- Example begin -->

<form name="ME">
Billing Name:
<input type="text" name="billname">
<br>Billing Address:
<input type="text" name="billaddy">
<br>Billing City:
<input type="text" name="billcity">
<br>Billing Province:
<input type="text" name="billstate">
<br>Billing Code:
<input type="text" name="billcode">
<input type="checkbox" onclick="FillFields(this)">
Check box to copy billing info into shipping.
<br>Shipping Name:
<input type="text" name="shipname">
<br>Shipping Address:
<input type="text" name="shipaddy">
<br>Shipping City:
<input type="text" name="shipcity">
<br>Shipping Province:
<input type="text" name="shipstate">
<br>Shipping Code:
<input type="text" name="shipcode">
<input type="submit">

<script type="text/javascript" language="JavaScript">
function FillFields(box) {
if(box.checked == false) { return; }
document.ME.shipname.value = document.ME.billname.value;
document.ME.shipaddy.value = document.ME.billaddy.value;
document.ME.shipcity.value = document.ME.billcity.value;
document.ME.shipstate.value = document.ME.billstate.value;
document.ME.shipcode.value = document.ME.billcode.value;
<!-- Example end -->

The checkbox calls the FillFields() function whenever it is clicked, whether checked or unchecked.

The first line of the FillFields() function determines whether or not the checkbox is checked. If not, it returns without doing anything. But if it is checked, it proceeds to do the copying.

Each of the rest of the lines of the FillFields() function copies the content of the form field on the right of the equal sign character and pastes it into the form field on the left of the equal sign.

“ME” is the form name. The form field name is between the two period characters following ME.

To customize the JavaScript, simply change the form name and form field names to work with your form, adding or removing lines as necessary.

Link Instead of Checkbox

If you prefer to have a link to click for filling in the shipping fields, instead of a checkbox, two changes need to be made:

1. Replace the checkbox form field with:

<a href="javascript:FillFields()"> 

Copy billing info into shipping.

2. Remove the first line of the FillFields() function:

if(box.checked == false) { return; }

Ease of use is a mark of professionalism.

2010-05-26T11:22:08+00:00 May 11th, 2005|JavaScript|0 Comments

About the Author:

Leave A Comment