- Features:
- Competitive pricing
- No set-up Charges
- Over 99.99% Availability
- Free Trial Software
- Free Technical Support
- Try before you buy
-
Local or Internet Data
- Reseller Opportunities
-
Explain more…
JQuery Popup Postcode Address Finder in PHP
This solution is best suited to a Web Application, for Office use, as it has no impact on the under laying web form.
To see demo press one of the button to demonstrate the three different levels of address searching:
Code for .Net
Please note : This demonstration is
restricted to 5 uses in any one day
The above functionality can be installed in minutes in 6 easy steps:
The above Postcode Finder for Full/Street Address Search functionality can be added to a PHP capable web site in minutes, by simply dropping the supplied files into your Web project.
Advantages
- Uses JQuery popup, for a rich user experience
- Popup overlaid over your web page, thus has little impact on your web page design
- Ideal for Internal Use Web Applications
- Will run on most Web servers
- Not blocked by Pop-up blockers
- No Data Administration Cost for you
- Up to date Royal Mail data. Daily updates applied from our reliable web servers
- Special test postcodes to test your JQuery web postcode address finder
Requirements:
Web server capable of running PHP code, which is most web servers. The page requires JQuery to display popup and perform the search which is included in download.
How to implement in 6 steps:
Step1: Download the Example Code
Simply download the example code. The code is in the "Web Popup\JQuery PHP Popup" directory of our example downloads.
Then copy 'splpopup' directory and 'index.html', into the same directory as your web page which requires the Address Finder. We suggest you get the example working on you server to prove the server communication, data key, etc before adding to your own page. Download code
Important: The
'splpopup' directory must be in a sub-directory of
your postcode address lookup page.
Step 2 : Add reference to our JavaScript file to your page
Then on your own web page header, add the following reference to the Style sheet and JavaScript files included in our downloaded code.
This line is shown in the "index.html" file included in the example download, as is the rest of the code.
Reference the JavaScript/Style files
 HTML Code
in <head> section |
| <link rel="stylesheet" type="text/css"
media="screen" href="splpopup/sload.php?css" /> <script type="text/javascript" src="splpopup/sload.php?js"></script> |
Step 3 : Add a Link, button or image to activate Postcode Address Finder
Then add either a link, or button image, activate from JQuery code, using the following code to activate the Postcode Address Finder popup window:
Example link to activate Postcode Address Finder Window:
|
HTML Code
(in your page) |
<input type=button value="Search" href="splpopup/search_address.php" toptions="layout=dashboard,effect=clip, overlayClose = 1,shaded=1, onclose=hideBubbles(),ondisplay=initSearchform()"/> |
Example button to activate Postcode Address Finder Window:
|
HTML Code
(in your page) |
<a href="splpopup/search_address.php" id="plsearch" value="Search" toptions="effect=clip,layout=dashboard, overlayClose = 1,shaded=1, onclose=hideBubbles(),ondisplay=initSearchform()"> <img id="plsearch_btn" class="buttons" src="images/SPLButtons/FindAddress/button.png" onmouseover = "this.src ='images/SPLButtons/FindAddress/buttonhover.png'" onmouseout = "this.src = 'images/SPLButtons/FindAddress/button.png'" alt="Postcode Finder Button"> </a> |
This could easily be changed to use an image button.
Example JQuery code to activate Postcode Address Finder Window:
| JQuery Code
(in your page) |
<a href="splpopup/search_address.php" $("#findAddressBut").click(function () { var xpos = ($(document).width() / 2) - 230; var ypos = ($(document).height() / 2) - 300; var data = { 'x': xpos, 'y': ypos, 'shaded': 1, 'overlayClose': 1, 'layout': 'dashboard', 'effect': 'clip', 'onclose': 'hideBubbles()', 'ondisplay': 'initSearchform()' }; TopUp.display("splpopup/splsearch.aspx", data); }); </a> |
The above example shows to control the windows position.
Step 4 : Map your Address fields to Address Finder returned data
Now edit the PHP file "plconfig.php", to write the correct address lines, which result from the Postcode Address Finder search, back to your target web page address fields:
|
PHP Code (splpopup/plconfig.php) |
/** * Self-explained fields, can be applied to any text field */ $organisation = 'company'; $line1 = 'line1'; $line2 = 'line2'; $line3 = 'line3'; $town = 'town'; $county = 'county'; $postcode = 'postcode'; $country = 'country'; |
Where the fields on your web page all have ID'd expressed:
<input type=text name=company id=company size=45>
<input type=text name=line1 id=line1
size=45>
<input type=text name=line2 id=line2 size=45>
<input type=text name=line3 id=line3 size=45>
<input type=text name=town id=town size=45>
<input type=text name=county id=county size=45>
<input type=text name=postcode id=postcode size=45>
<input type=text name=country id=country size=45>
The Popup Address Finder uses our JSON Web service to retrieve Royal Mail UK Address data. The full address record is:
JSON Data returned |
{ "found":"1", "credits_display_text":"Evaluation expires 3 Apr 2011", "accountadminpage":"https://www.simplylookupadmin.co.uk/WebAccountLogin.aspx? doid=1&coid=3333305462&Pay=yes", "errormessage":"", "id":"31567757_2957290S_F", "organisation":"Tesco", "line1":"Barford Road", "line2":"", "line3":"", "town":"St. Neots", "county":"Cambridgeshire", "postcode":"PE19 2SA", "country":"England", "rawpostcode":"PE192SA", "deliverypointsuffix":"1N", "nohouseholds":"1", "smallorg":"Y", "pobox":"", "mailsortcode":"66140", "udprn":"50394326" } |
Other fields of interest:
| Name | Description |
|---|---|
| id | Is only used for our internal use |
| deliverypointsuffix | This code can be added to the postcode to give a unique reference to each Delivery Point (letterbox) in a Postcode. Although the UDPRN number is a better source of unique ID. |
| nohouseholds | Number of house holds at this postcode address |
| smallorg | Y = Small Organisation |
| pobox | PO Box number if PO Box address |
| rawpostcode | Postcode in its raw state. 7 chars long |
| mailsortcode | The Royal Mail offer discount if mail is sorted by this code |
| udprn | is a unique 8 digit code assigned to each addressable property (Delivery Point). |
| unique ● | gives the unique portion of the address record, in the above example "44". |
| spare ● | This is for future use. It will contain "|" separated data |
● see Additional Data Returned by Postcode Finder API for more information
Step 5 : Specify the Data Key
Open an account with us. Within seconds you will then receive a data key, by e-mail, which should be put in "plconfig.php" files. This key will enable your account, for a 30 day evaluation period, for one postcode area.
Identify your account:
|
PHP Code (splpopup/plconfig.php) |
$datakey = "PUT YOUR DATA KEY HERE"; |
Step 6 : Select the type of Postcode Address Finder
The JQuery Postcode Finder can provide Full Address, with or without Advanced search or Street\Thoroughfare. This can be set in the "plconfig.php" file.
Select Search Type:
|
PHP Code (splpopup/plconfig.php) |
$typeOfSearch="FULLADV" |
| Mode | Description |
|---|---|
| FULL | Full Address Search - You simply enter the postcode and search. A list of addresses, for that postcode, is then presented for selection. |
| FULLADV | As above + Advanced Search function, which
allows for address searching based on partial
address words. Note: This is for Internal Use only, as members of the public would not want this level of searching. It is disabled for live External Use licenses. |
| STREET |
Thoroughfare/Street Address - Simply returns the address record, less the Organisation name, Building name or number. The user then has to manually enter the Building Name/Number. |
Enter Postcode "ZZ99" to use test data. Test postcodes for various address formats.
Optional Popup Address Finder Customisation
Customise appearance by change Styles
Edit the styles in the “pldemo\assets\css\style.css” files if need be.
Only load JQuery if need be
in "pldemo/sload.php" if top_up (see http://www.gettopup.com/ for more information) library is already included in your web page, remove "assets/js/jquery/all.js" and "assets/js/top_up-min.js" from $js_files array
Turn On/Off the bubble help
in "pldemo/plconfig.php" simply edit:
|
PHP Code (splpopup/plconfig.php) |
/** * Bubble Help parameters * $bubbleHelp = -1; Do not show bubble help * $bubbleHelp = 0; Always show bubble help * $bubbleHelp = N; N - positive integer; * Show bubble help N first runs * $bubbleHelpDuration = N; N - positive integer * Bubble help duration in seconds */ $bubbleHelp = 0; $bubbleHelpDuration = 3; |
Show license details
Usually you want to hide the license details from the end user, but when used for Internal Use, you may want to show the user count. To turn this on:
|
PHP Code (splpopup/plconfig.php) |
/** * Show license status at bottom of window * $showLicenseStatus = 1; Show status after each search * $showLicenseStatus = 0; Hide status */ $showLicenseStatus = 0; |
To use with two address sections on one page
- Copy file “plconfig.php”, call it “plconfig2.php”.
- Copy file “search_address.php”, call it “search_address2.php”.
- Edit this new page, and change the first PHP line to: include 'plconfig2.php';
- Now edit 'plconfig2.php' field mappings to point to second section of address fields on your form
- Add the find button on second address section but
make it call “search_address2.php”.
How it Works
When page is loaded, the reference to the "splpopup/sload.php?css" and "splpopup/sload.php?js" loads the style sheets and JavaScript listed in the "splpopup/sload.php" page. This speeds up the loading of multiple style sheets and JavaScript files.
When the user presses the [Find Address] button, the popup is displayed. See http://www.gettopup.com for more information on popup code.
The popup shown is basically derived from “splpopup/search_address.php”. This file at the top has an include statement to load the configurations set in “splpopup/plconfig.php”. Which contains the bulk of customisation code to define the fields on your form to be written back to, and your datakey which identifies your account.
The “splpopup/sfsearch.php” file does the actual searching when the user presses a search button.
Why do you have to have extra pages on your server?
Reason 1
Some browsers, especially if the client has turned up the security settings, may stop the client web page talking to a server from different domain. So by adding a page into your web domain, to relay the query to our Postcode address lookup server, removes this security problem.
Reason 2
Hides your account information from the Client Web Browser
[More information on AJAX Programming]
This example could easily be converted to any other server side language, since the PHP pages are simply used to relay XML data from our server. The clients side JavaScript would remain the same.
Related "Web Site Postcode Finder" topics
| Simple HTML Popup | JQuery Popup Address Finder |
| AJAX Full Address Finder | AJAX UK Street Finder Software |
| Download Example Code | Request a Quote and Brochure |
| Open a 30 day evaluation account | |