AddressFinder - Registration Form (jQuery)

by bizamajig

HTML

<script src="http://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<h2>Register for an Account</h2>

<form method="get" target="_new">
  <label for="name">Name</label>
  <input type="text" id="name" name="name">
    
  <label for="address1">Address</label>
  <input type="text" id="address1" name="address1" class="address-field address-search" placeholder="Enter address here"><br>
  <input type="text" id="address2" name="address2" class="address-field">

  <label for="suburb">Suburb</label>
  <input type="text" id="suburb" name="suburb" class="address-field">

  <label for="city">City</label>
  <input type="text" id="city" name="city" class="address-field">
    
  <label for="postcode">Post code</label>
  <input type="text" id="postcode" name="postcode" class="address-field">
    
  <p>
    <input type="submit" name="submit" value="Register">
  </p>
</form>

CSS

body {
    padding: 5px;
}

label {
    margin: 1em 0 0;
    display: block;
}

input[type=text] {
    width: 20em
}

h2 {
    font-weight: bold;
}

p {
    margin: 1em 0 0;
}

JavaScript

$(document).ready(function() {
  $(".address-search").each(function(index){  
    var widget = new AddressFinder.Widget(this, "WR3NUKVGC4Q97FPHBJXL", {
        show_locations: false
    });

    widget.on("result:select", function(value, item) {

        /* clear address fields */
        $("input.address-field").val("");

        /* if address is a PO Box */
        if (item.box_type) {
            $("#address1").val((item.box_type && item.number) ? item.box_type + " " + item.number : item.a);
            $("#suburb").val(item.lobby_name || '');
        }

        /* if address is a unit/flat/apartment */
        else if (item.unit_identifier) {
            $("#address1").val(item.unit_type + " " + item.unit_identifier);
            $("#address2").val(item.number + (item.alpha || '') + " " + item.street);
            $("#suburb").val(item.suburb || '');

            /* other address is a normal street address */
        } else {
            $("#address1").val(item.number + (item.alpha || '') + " " + item.street);
            $("#suburb").val(item.suburb || '');
        }

        /* populate common fields */
        $("#city").val(item.mailtown || item.city);
        $("#postcode").val(item.postcode);
    });
  });
});