jquery for postcode lookup

Author: tfgg

_images/logo2.psd

@@ -9,6 +9,8 @@
         <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
         <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
 
+        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+
         <!-- syntax highlighting CSS -->
         <link rel="stylesheet" href="/css/syntax.css">
 
@@ -33,16 +35,16 @@
             <div style='clear:both;'></div>
           </div>
           <div class="col-md-2 getcode">
-            <p><a href='https://github.com/tfgg/yournextmep'>Contribute on Github</a></p>
+            <p><a href='https://github.com/tfgg/yournextmep' target="_blank">Contribute on Github</a></p>
           </div>
         </div>
 
         {{ content }}
 
         <div class='row footer'>
           <div class='col-md-12'>
-            <p class="text-warning">This site is under construction (you could probably guess that). Help contribute information about MEP candidates <a href='https://github.com/tfgg/yournextmep'>on Github</a> or <a href='mailto:[email protected]'>email me</a> or <a href='http://twitter.com/tfgg2'>follow me on Twitter</a>.</p>
-            <p>Postcode lookup service from <a href='http://mapit.mysociety.org/'>MapIt</a> by <a href='http://www.mysociety.org/'>mySociety</a>.</p>
+            <p class="text-warning">This site is under construction (you could probably guess that). Help contribute information about MEP candidates <a href='https://github.com/tfgg/yournextmep' target="_blank">on Github</a> or <a href='mailto:[email protected]'>email me</a> or <a href='http://twitter.com/tfgg2' target="_blank">follow me on Twitter</a>.</p>
+            <p>Postcode lookup service from <a href='http://mapit.mysociety.org/' target="_blank">MapIt</a> by <a href='http://www.mysociety.org/' target="_blank">mySociety</a>.</p>
           </div>
         </div>
       </div>

_layouts/default.html

@@ -3,14 +3,33 @@
 title: YourNextMEP 
 ---
 
+<script>
+$(document).ready(function(){
+  var form = $('form#postcode-form');
+
+  form.submit(function() {
+    $.post('/api/postcode', form.serialize(),
+          function(data) {
+            alert(data);
+          });
+
+    return false;
+  });
+});
+</script>
+
 <div class="row">
   <div class="col-md-12">
-    <h1>UK EU election regions</h1>
-    <form action='/api/postcode' method='POST' class='form-inline'>
-      <input type="text" placeholder="enter your postcode">
-      <button type="submit" class="btn">Find region</button>
+    <form action='/api/postcode' method='POST' role="form" class='form-inline' id='postcode-form'>
+      <div class="form-group">
+        <label class="sr-only" for="postcode">Postcode</label>
+        <input name="postcode" class="form-control" type="text" placeholder="enter your postcode">
+      </div>
+      <button type="submit" class="btn btn-default">Find region</button>
     </form>
-
+  </div>
+  <div class="col-md-12">
+    <h1>UK EU election regions</h1>
     <ul class="regions">
       {% for region in site.pages %}
         {% if region.layout == 'region' %}