UK Postcode Lookup On Two Forms (Billing & Shipping)

Add UK Postcode Lookup to two address forms on a single HTML page.

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 KB

You may want to read our basic tutorial "UK Postcode Lookup in 15 Minutes" first. Here we assume you already have it all working on a single address form and are now adding UK Postcode Lookup to the second form.

JS Class & Config

Upload the JavaScript file crafty_postcode.class.js to your webserver and reference it in your HTML, then create two objects. Note, that each of the objects needs its own config.

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

<script>
   var cp_obj_1 = CraftyPostcodeCreate();
   cp_obj_1.set("access_token", "xxxxx-xxxxx-xxxxx-xxxxx"); // your token here
   cp_obj_1.set("result_elem_id", "crafty_postcode_result_display_1");
   cp_obj_1.set("form", ""); // left blank, we will use element id's
   cp_obj_1.set("elem_company"  , "companyname_1");
   cp_obj_1.set("elem_street1"  , "address1_1");
   cp_obj_1.set("elem_street2"  , "address2_1");
   cp_obj_1.set("elem_street3"  , "address3_1");
   cp_obj_1.set("elem_town"     , "town_1");
   cp_obj_1.set("elem_postcode" , "postcode_1");

   var cp_obj_2 = CraftyPostcodeCreate();
   cp_obj_2.set("access_token", "xxxxx-xxxxx-xxxxx-xxxxx"); // your token here
   cp_obj_2.set("result_elem_id", "crafty_postcode_result_display_2");
   cp_obj_2.set("form", ""); // left blank, we will use element id's
   cp_obj_2.set("elem_company"  , "companyname_2");
   cp_obj_2.set("elem_street1"  , "address1_2");
   cp_obj_2.set("elem_street2"  , "address2_2");
   cp_obj_2.set("elem_street3"  , "address3_2");
   cp_obj_2.set("elem_town"     , "town_2");
   cp_obj_2.set("elem_postcode" , "postcode_2");
</script>

The HTML form

The forms on your page might look along these lines. The important part are the IDs of the input elements and the names of the objects. They need to match your JS config.

<form method="post" name="bill_address">
    Billing Postcode:<br/>
    <input type="text" name="postcode" id="postcode_1"/>&nbsp;&nbsp;&nbsp;
    <button type="button" onclick="cp_obj_1.doLookup()">Find Address</button><br/>
    <span id="crafty_postcode_result_display_1">&nbsp;</span><br/>
    Billing Company:<br/>
    <input type="text" name="companyname" id="companyname_1"/><br/>
    Billing Address:<br/>
    <input type="text" name="address1" id="address1_1"/><br/>
    <input type="text" name="address2" id="address2_1"/><br/>
    <input type="text" name="address3" id="address3_1"/><br/>
    Billing Town:<br/>
    <input type="text" name="town" id="town_1"/><br/>
</form>

<form method="post" name="ship_address">
    Shipping Postcode:<br/>
    <input type="text" name="postcode" id="postcode_2"/>&nbsp;&nbsp;&nbsp;
    <button type="button" onclick="cp_obj_2.doLookup()">Find Address</button><br/>
    <span id="crafty_postcode_result_display_2">&nbsp;</span><br/>
    Shipping Company:<br/>
    <input type="text" name="companyname" id="companyname_2"/><br/>
    Shipping Address:<br/>
    <input type="text" name="address1" id="address1_2"/><br/>
    <input type="text" name="address2" id="address2_2"/><br/>
    <input type="text" name="address3" id="address3_2"/><br/>
    Shipping Town:<br/>
    <input type="text" name="town" id="town_2"/><br/>
</form>

Experiment with this code on JSFiddle

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.