Copying Form Fields Into Other Form Fields

Letting a person tap something to copy information from one form field to another is a technique commonly used on purchase order forms, but can be used elsewhere, too.

As an example, the buyer taps something to copy billing information fields into shipping information fields.

Other examples are:

1. Filling in a home telephone number field from an already-provided work telephone number field.

2. Copying contact information from the fields for one spouse into fields for the other spouse.

Whenever a field might end up with the same information as another field, the information can be copied from one field to the other. A tap is easier than retyping information.

A Working Example

This forms second set of location information will be copied from the first set when the "(Same as above.)" link is tapped.

You see how it works. The shipping location fields are quickly filled with the postal information fields.

Here is the source code of the form fields of the example. Comments follow.

<div style="border-left:3px solid #ccc; padding-left:.75em; border-top-left-radius:1em; border-bottom-left-radius:1em;">
<p style="font-weight:bold;">
Postal Mailing Address
</p>
<p>
Name:<br><input type="text" id="contact-name" name="ContactName">
</p>
<p>
Address:<br><input type="text" id="contact-address" name="ContactAddress">
</p>
<p>
City:<br><input type="text" id="contact-city" name="ContactCity">
</p>
<p>
State or Province:<br><input type="text" id="contact-province" name="ContactProvince">
</p>
<p>
Zip or Postal Code:<br><input type="text" id="contact-postal" name="ContactPostal">
</p>
<p>
Country:<br><input type="text" id="contact-country" name="ContactCountry">
</p>
</div>
<div style="border-left:3px solid #ccc; padding-left:.75em; border-top-left-radius:1em; border-bottom-left-radius:1em;">
<p style="font-weight:bold;">
Shipping Address
</p>
<p>
<a href="javascript:CopyFormFields()">(Same as above.)</a>
</p>
<p>
Name:<br><input type="text" id="shipping-name" name="ShippingName">
</p>
<p>
Address:<br><input type="text" id="shipping-address" name="ShippingAddress">
</p>
<p>
City:<br><input type="text" id="shipping-city" name="ShippingCity">
</p>
<p>
State or Province:<br><input type="text" id="shipping-province" name="ShippingProvince">
</p>
<p>
Zip or Postal Code:<br><input type="text" id="shipping-postal" name="ShippingPostal">
</p>
<p>
Country:<br><input type="text" id="shipping-country" name="ShippingCountry">
</p>
</div>

When the "(Same as above.)" link is tapped the values in the form fields colored blue in the postal section are copied into the form fields colored red in the shipping section.

The link URL is javascript:CopyFormFields(), which calls the JavaScript function that does the copying.

Here is the source code of the entire link:
<a href="javascript:CopyFormFields()">(Same as above.)</a>

Below is the source code of the JavaScript function CopyFormFields() used by the example. Comments follow.

<script type="text/javascript">
function CopyFormFields()
{
    var CopyFromList = new Array( "contact-name", "contact-address", "contact-city", "contact-province", "contact-postal", "contact-country" );
    var CopyToList = new Array( "shipping-name", "shipping-address", "shipping-city", "shipping-province", "shipping-postal", "shipping-country" );
    for( var i=0; i<CopyFromList.length; i++ )
    {
        document.getElementById(CopyToList[i]).value = document.getElementById(CopyFromList[i]).value;
    }
}
</script>

Notice the lists of blue and red id values in the JavaScript. Those are the id value of the forms further above.

The items in the two lists correspond. In other words, the first item in the blue list is "contact-name" and the first item of the red list is "shipping-name". Those two are the id values of corresponding form fields.

Each of the items in the two lists correspond in that way.

The JavaScript can be published anywhere on the page. Immediately above the cancel </body> tag generally is a good place.

When the form goes live, it has a nice convenience for form users, the mark of a professional web site.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager