UK Postcode Lookup in 15 Minutes

Quick 3 steps to adding UK Postcode Lookup to any HTML address form.

Before you start, download the latest version of the JavaScript class and unzip it:

Download “Generic Java Script Class” crafty_clicks_js_class_v4_9_2.zip – 18 KBopen in new window

Step #1 – add our JS

Upload the JavaScript file crafty_postcode.class.js to your webserver and reference it in your HTML, you may have to use relative or absolute paths in the src property:

<script src="crafty_postcode.class.js"></script>

Step #2 – create the form

Create an address form in HTML:

<form method="post" name="address">
   Postcode:<br/>
   <input type="text" name="postcode"/>&nbsp;&nbsp;&nbsp;
   <button type="button" onclick="cp_obj.doLookup()">Find Address</button><br/>
   <span id="crafty_postcode_result_display">&nbsp;</span><br/>
   Company:<br/>
   <input type="text" name="companyname"/><br/>
   Address:<br/>
   <input type="text" name="address1"/><br/>
   <input type="text" name="address2"/><br/>
   <input type="text" name="address3"/><br/>
   Town:<br/>
   <input type="text" name="town"/><br/>
</form>

NOTE: “companyname”, “address2/3” and “county” are optional, you can leave these <input> fields out if it suits your site.

Step #3 – configure the JS

Create and configure the JavaScript object:

<script>
   var cp_obj = CraftyPostcodeCreate();
   cp_obj.set("access_token", "xxxxx-xxxxx-xxxxx-xxxxx"); // your token here
   cp_obj.set("result_elem_id", "crafty_postcode_result_display");
   cp_obj.set("form", "address");
   cp_obj.set("elem_company"  , "companyname");
   cp_obj.set("elem_street1"  , "address1");
   cp_obj.set("elem_street2"  , "address2");
   cp_obj.set("elem_street3"  , "address3");
   cp_obj.set("elem_town"     , "town");
   cp_obj.set("elem_postcode" , "postcode");
</script>

Note that on the ‘Find Address’ button, the onclick action calls the doLookup() method.

The address results (or an error message) will be placed in the element with id=”crafty_postcode_result_display”.

All done!

Experiment with this code on JSFiddleopen in new window

Optional – use element IDs

In Steps 2 & 3 we refer to all the input elements by their NAMEs. Sometimes that is convenient, but sometimes it may be easier to use their IDs. Here is how to change this…

In Step #2, add an ID property to each input element:

<form method="post" name="address">
 Postcode:<br/>
 <input type="text" name="postcode" id="postcode"/>&nbsp;&nbsp;&nbsp;
 <button type="button" onclick="cp_obj.doLookup()">Find Address</button><br/>
 <span id="crafty_postcode_result_display">&nbsp;</span><br/>
 Company:<br/>
 <input type="text" name="companyname" id="companyname"/><br/>
 Address:<br/>
 <input type="text" name="address1" id="address1"/><br/>
 <input type="text" name="address2" id="address2"/><br/>
 <input type="text" name="address3" id="address3"/><br/>
 Town:<br/>
 <input type="text" name="town" id="town"/><br/>
</form>

Then is Step #3, simply remove the form name:

<script>
cp_obj.set("form", ""); // blank form name means use input elem IDs
</script>

Experiment with this code on JSFiddleopen in new window

If things don’t work for any reason, email any error codes/messages to us. We will be happy to help. You may also want to read the JavaScript user guide, if you haven’t already.