Adding RapidAddress to a web page with JavaScript

This is a quick step-by-step integration guide describing how to add a RapidAddress postcode based address finder to a HTML website. We recommend you read the JavaScript user guide first.

Step #1

Download the latest version of the JavaScript class from the downloads section. You could also use the integration pack, it contains ready made HTML pages that may be handy as a starting point.

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 type="text/javascript" charset="ISO-8859-1" src="crafty_postcode.class.js">
</script>

NOTE: the "ISO-8859-1" bit is important as the JS script is compressed.

Step #2

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_county"   , "county");
	cp_obj.set("elem_postcode" , "postcode");
</script>

Step #3

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/>
 County:<br/>
 <input type="text" name="county"/>
</form>

NOTE: "companyname", "address2/3" and "county" are optional, you can leave these <input> fields out if it suits your site. Remember to delete also them from the JavaScript config in step 2. For example if you do not want the county field : cp_obj.set("elem_county", "");

Note 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!

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.