How to Add UK Address Lookups to Online Forms | WebReference

How to Add UK Address Lookups to Online Forms


How to Add UK Address Lookups to Online Forms

By Drew Clayton

Digg This Add to

Most consumer Web sites contain a form used to collect postal addresses. This article demonstrates how a UK address can be automatically filled from the postal code or known part of the address, using the PostCoder Web SOAP service from Allies Computing Ltd.

Providing an address auto complete function on your forms will save your user many keystrokes, make your site look more professional and can save you money in returned mail. Since the service uses SOAP to communicate, any host that provides a server side scripting language with an available SOAP client can be used.

The example code provided with PostCoder Web SOAP is available in PHP (4 and 5), ASP.NET (C#, VB), ASP, Perl, Java and ColdFusion. The principles in this article can be used with any of the example languages, but here we'll use a PHP script as supplied with PostCoder Web SOAP.

Let's assume that your existing page includes the following structure:

Such as:

Image 1 – Basic address collection form

To add the address lookup feature without affecting your existing form, we can add a hidden form to your page, used solely to post the address search string to an address lookup script.

The target of this additional form is an iFrame which is used to display the result of the address lookup.

In addition to the input search string ‘inputString’, an ‘identifier’ can be used within PostCoder Web SOAP. This identifier can be set to any string and is used within statistics reports to distinguish between different address lookup forms. For example, your brochure request form could have the identifier ‘brochure’ and your delivery address form could have the identifier ‘delivery.’

A simple input box and search button can be added to your address form, where the action of the button is a JavaScript function which populates the inputString in the ‘PostCoderForm’ form and submits the form to the lookup page.

Your modified page will now resemble:

Image 2 – Address collection form with auto complete

A few modifications are required to the script file, getPremiseListExample.php. The username and password as provided when registering for the service must be entered, and the JavaScript function updateddress() will need to be updated to reference your address form with the correct input names.

Entering a postal code and clicking the button will run the JavaScript function findaddress() which will populate the hidden inputString input and post the form to the script getPremiseListExample.php within the iframe.

The getPremiseListExample.php script will send the postal code to the PostCoder Web SOAP service via a SOAP message and will receive back the full address and all premises of that postal code. The script then generates a clickable list of premises for your user to select from:

Image 3 – Clickable address list

When the user clicks on an address from the list, the JavaScript function updateddress() is called and this populates the fields of your form:

Image 4 – Completed address form

In the example above, six keystrokes were entered, ‘b908aj’ and the PostCoder Web SOAP Service automatically filled in the full address containing 131 keystrokes; this is a 95% saving.

For details on the PostCoder Web SOAP service and to sign-up for a completely free trial, visit Allies Computing Ltd. Phone/Fax: 01508 494488 / 01508 494481

Digg This Add to

Created: March 27, 2003
Revised: July 10, 2007