Postcode Anywhere Address Management Web Service
HOME PRODUCTS DEVELOPERS RESELLERS CONTACT US MY ACCOUNT
Developer home
Getting started
Tutorials
Code samples
Documentation and reference
Downloads
Service information
Call us: 0800 047 0493
Home - Developer Centre - Tutorials - International Addresses

International SmartForm

SmartForm™ is a JavaScript control which you can drop onto any HTML page. It automatically detects the country the request is coming from and offers a range of language options to make it easier for the customer.

Step 1: Your HTML Page

First of all, you obviously need an HTML page to capture addresses. Unusally though, don't have any address items (line, town, county etc), although you will need things like forename, surname etc. In time we plan to extend SmartForm™ to do these too.

To start with, you need to put some JavaScript on your page in the HEAD tag. At the same time, it's worth putting in the CSS styles to make it look pretty. You can change the styles to suit your page later on. Here's what you need (remember to put your own account + license details in the SCRIPT source url): 

<head>
<script src="http://services.postcodeanywhere.co.uk/javascript/smartform.aspx?account_code=AAAAA11111&license_key=AA11-AA11-AA11-AA11"></script>
<style>
  .addressform {font-family:arial; font-size:9pt}
  .addressform .field {font-family:arial; font-size:9pt}
  .addressform .label {font-family:arial; font-size:9pt; font-weight:bold; text-align:right}
  .autocomplete {border-bottom:solid 1px #aaaaaa; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; background-color:#fafafa}
  .autocomplete A {text-decoration:none; color:#000000}
  .autocomplete .item {padding:5px; border-bottom:solid 1px #aaaaaa; background-color:#fafafa}
  .autocomplete .itemhover {padding:5px; border-bottom:solid 1px #aaaaaa; background-color:#f0f0f0}
  .autocomplete .itemlast {border-top:solid 1px #aaaaaa; background-color:#ffffff}
</style>
</head>

Step 2: Positioning

The next thing to do is position the form on the page. You need to add a DIV onto the page where you want the form to be. Make sure you give it an ID too as this will be used later: 

<div id="divSmartForm"></div>

Step 3: Wiring it up

So far, so good. Now here's the clever stuff! You need some more JavaScript to convert that boring old DIV into a very exciting international address capture thingy!

But before you do that, you also need some more JavaScript to figure out what address has been entered. You need a new function which you'll pass to the form. This gets called each time the address is altered (e.g. key pressed, autocomplete invoked etc). You can use this function to get the address details from the SmartForm™ and store it elsewhere: 

<script>
  var objFinder = new PCASmartForm(document.getElementById("divSmartForm"), "", "", cb);
  function cb()
  {
	//Do something with the address
  }
</script>

Tip: For those who want to know, the second and third parameters are country + language defaults. These should be the 3 character ISO codes. If you leave these blank, we check the IP address of the browser and infer the country and default language for you.

Step 4: Dealing with the response

Believe it or not, we're almost there! Our callback function "cb" gets called when the address changes so we can do something with it. The form exposes a number of properties which can then be used to get at the data that's being entered. The properties available are:

Building Buiding name or number
Street Street / road etc.
Locality Locality / district
City City or town name
State The state / province etc.
Postcode The postcode entered
CountryName The name of the country
Label The fully formatted mailing label
Line1 The first (premise) line of the address
Line2 The second (premise) line of the address

For this demo, we'll drop in a new DIV and fill it with the mailing label for the address that's selected. Note that we need a small regular expression to convert the new line characters in the label to line breaks: 

<script>
  var objFinder = new PCASmartForm(document.getElementById("divSmartForm"), "", "", cb);
  function cb()
  {
	document.getElementById("divLabel").innerHTML = objFinder.Label().replace(/\n/g, "
");
  }
</script>
<div id="divLabel"></div>

All done!

That's it! And let's be honest, it's really not that hard is it?!

Customising

The best way to customise the form is to change the styles you copied into the HEAD tag at the start. Here's a description of what they mean:

.addressform The container for the address form
.addressform .field The text boxes + drop downs on the form
.addressform .label The labels to the left of the text boxes
.autocomplete The container for the autocomplete box (which appears below the street field)
.autocomplete A The text inside the autocomplete box - the street name is in BOLD by default.
.autocomplete .item The box that holds each item in the autocomplete box. This is the style that's used by default.
.autocomplete .itemhover The box that holds each item in the autocomplete box when the moves moves over it, used for highlighting the item.
.autocomplete .lastitem The style used by the last item in the autocomplete box.

Using CSS, there's loads of scope for make it look at home on your page. Play around and if you have any questions, we're always here to help!

Try it yourself

Register for a trial