UK postcode search using the brilliant http://postcodes.io/
Last active
January 11, 2016 20:44
-
-
Save fryford/37e61a450e178e7a185b to your computer and use it in GitHub Desktop.
UK postcode search
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" class="no-js"> | |
| <head> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=Edge"> | |
| <title>Postcode search</title> | |
| <style> | |
| body { | |
| padding:15px; | |
| margin:0px; | |
| font-family: "Open Sans", Freesans, Helvetica, Arial, sans-serif, Roboto; | |
| color:#404040; | |
| display:table; | |
| /*padding-bottom: 100px;*/ | |
| } | |
| #pcText { | |
| width: 130px; | |
| height:44px; | |
| padding: 3px; | |
| color: #999999; | |
| } | |
| .picaarticle { | |
| font-size:18px; | |
| line-height:24px; | |
| } | |
| .btnEnable { | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| width: 110px; | |
| border: none; | |
| padding: 6px 0; | |
| background-color: #0084d1; | |
| font: 700 16px Arial; | |
| color: #FFF; | |
| filter: inherit; | |
| -webkit-appearance: button; | |
| cursor: pointer; | |
| } | |
| .col-sm-12 { | |
| width: 100%; | |
| } | |
| .col-xs-12 { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="col-sm-12 col-xs-12" id="postcode"> | |
| <form id="pcForm"> | |
| <input id="pcText" class="picaarticle" type="text" tabindex="1" placeholder="e.g. NP10 8XG"> | |
| <button class="btnEnable" id="submitPost" type="submit">GO!</button> | |
| </form> | |
| <div id="pcError" class="picaarticle">Sorry, that's not a valid postcode. Try an English, Welsh or Scottish postcode eg PO15 5RR.</div> | |
| <div id="successMessage" class="picaarticle">Sorry, we don't have data for a few areas. Unfortunately your area is one of these.</div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-git2.min.js"></script> | |
| <script> | |
| $("#pcError").hide(); | |
| $("#successMessage").hide(); | |
| $("#submitPost").click(function( event ) { | |
| event.preventDefault(); | |
| event.stopPropagation(); | |
| myValue=$("#pcText").val(); | |
| getCodes(myValue); | |
| }); | |
| function getCodes(myPC) { | |
| var myURIstring=encodeURI("https://api.postcodes.io/postcodes/"+myPC); | |
| $.support.cors = true; | |
| $.ajax({ | |
| type: "GET", | |
| crossDomain: true, | |
| dataType: "jsonp", | |
| url: myURIstring, | |
| error: function (xhr, ajaxOptions, thrownError) { | |
| $("#pcError").text("couldn't process this request").show(); | |
| }, | |
| success: function(data1){ | |
| if(data1.status == 200 ){ | |
| $("#pcError").hide(); | |
| area =data1.result.codes.admin_district; | |
| areaName = data1.result.admin_district; | |
| $("#successMessage").text("The postcode " + myPC + " is situated in " + areaName + " which has an area code of " + area).show(); | |
| } else { | |
| $("#successMessage").hide(); | |
| $("#pcError").text("Not a valid postcode I'm afraid").show(); | |
| } | |
| } | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment