0151 355 4555

Button Styling

To control how the "Find", "OK" and "Cancel" buttons that are used by the Ajax Address Validation script are displayed, you can override the createButton function to set up these buttons as you require.

The sample below demonstrates overriding this function to use a link with the "button-small" CSS class (<a class="button-small">...</a>) instead of the default button (<input type="button" value="..." />).

// Define your own yourco.styledPostcodeLookupButton class,
// inheriting from data8.postcodeLookupButton

if (typeof (yourco) == 'undefined') {
	yourco = function () { };
}

yourco.styledPostcodeLookupButton = function (fields, options) {
	data8.postcodeLookupButton.apply(this, arguments);
};

yourco.styledPostcodeLookupButton.prototype = new data8.postcodeLookupButton();

// Override the createButton function to create buttons in your own format.

yourco.styledPostcodeLookupButton.prototype.createButton = function (label) {
	var button = document.createElement('a');
	button.className = 'button-small';
	button.href = 'javascript:void()';
	var text = document.createTextNode(label);
	button.appendChild(text);
	return button;
};

// Set up the postcode lookup system for your form.

new yourco.styledPostcodeLookupButton(
	[
		{ element: 'company', field: 'organisation' },
		{ element: 'address1', field: 'line1' },
		{ element: 'address2', field: 'line2' },
		{ element: 'address3', field: 'line3' },
		{ element: 'city', field: 'town' },
		{ element: 'county', field: 'county' },
		{ element: 'postcode', field: 'postcode' }
	],
	{
		// Change this to your own Ajax key
		ajaxKey: 'your-ajax-key',

		// Change this to your postcode lookup license type
		license: 'WebClickFull'
	}
).show();