Simple Postcode Lookup with Popups Tutorial
This article describes how to quickly add postcode lookup functionality into your existing
website in seconds, with no coding required!
When you've finished, your web page that currently
just has simple text boxes for the user to input their address will also have a "Find Address"
button that will bring up a popup screen that allows the user to enter their postcode, select their
address from a list and fill in your existing form automatically.
If you haven't already registered for our address capture service, you'll need to
do so now. Just fill in our quick registration form
to get started. One of our account managers will contact you to ensure you get set
up with the address capture package that is best for you.
Now let's get down to the details. In your web page editor, bring up the page that
you use at the moment to enter address details on. At the moment you'll probably
have a page that looks something like this:
To start adding the postcode lookup option, copy and paste the following HTML code
into your page next to one of the address text boxes:
<script
type="text/javascript"
src="http://webservices.data-8.co.uk/SimplePostcodeLookup/config.ashx">
</script>
Refresh the page in your web browser and you should now see a "Configure Address Lookup" button.
Before clicking the new button, you must indicate where you want the various parts
of the address to be placed after it has been captured. To do this, enter "line1",
"line2", "line3" etc in the text boxes where you want each line of the address to
go. If you always want the town and county in the same boxes, enter "town" and
"county" in these boxes. Finally, enter "postcode" in the box you want the postcode
to go into.
Now click the "Configure Address Lookup" button. You'll be asked to enter your Data8
username and password, and the type of address capture licence to use. If you're not
sure what to select here, please contact your account manager so they can advise you
on what is the best deal for you.
Enter your login details and click Login. You'll then be shown a new screen that
contains a customized section of HTML code that you can copy and paste into your
web page.
In your web page editor, copy and paste this HTML code into your web page, replacing
the code you added earlier to display the configuration button. If you now refresh
your web page in your web browser you will see a "Find Address" button:
That's it! With just a little copying & pasting you've added a complete postcode
lookup solution to your website.
Your users can now click your "Find Address" button and be shown a popup screen to
enter their postcode into:
Just type in a postcode and click "Find", and a list of all addresses in that postcode
is shown.
Select an address from the list and click "Select", and all the details of the
selected address will be filled into your original form, in the places you selected
in the initial configuration step.
If a user does not know their postcode, they can still accurately enter their address
by clicking on the "I don't know my postcode" link. They will then be asked to enter
any building, street and town details they can, and they will be shown a list of
matching addresses to choose from.
