-
Notifications
You must be signed in to change notification settings - Fork 4
/
address-lookup-shipping.html
134 lines (125 loc) · 5.61 KB
/
address-lookup-shipping.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<title>Billing and Shipping Address Lookup | Addy.co.nz</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<!-- only use if loadCss URL query attribute flag is set to false -->
<link type="text/css" rel="stylesheet prefetch" href="./css/addy.min.css">
<!-- or CDN -->
<!-- <link type="text/css" rel="stylesheet prefetch" href="https://www.addysolutions.com/address-lookup/1.6.0/css/addy.min.css"> -->
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 10pt;
}
.field {
width: 300px;
}
.label {
width: 120px;
}
</style>
</head>
<body>
<form>
<h2>Shipping Address</h2>
<p><b>Physical NZ street addresses only.</b></p>
<table>
<tr>
<td class="label">Address Line 1</td>
<td><input type="text" class="field" id="shipping-address1" placeholder="Start typing an address.." auto-complete></td>
</tr>
<tr>
<td>Address Line 2</td>
<td><input type="text" class="field" id="shipping-address2"></td>
</tr>
<tr>
<td>Suburb</td>
<td><input type="text" class="field" id="shipping-suburb"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" class="field" id="shipping-city"></td>
</tr>
<tr>
<td>Region</td>
<td><input type="text" class="field" id="shipping-region"></td>
</tr>
<tr>
<td>Postcode</td>
<td><input type="text" class="field" id="shipping-postcode"></td>
</tr>
</table>
<h2>Billing Address</h2>
<p><b>Any NZ address; including PO Boxes or Private Bag numbers.</b></p>
<p><label><input type="checkbox" id="billingChecked" checked onclick="toggleBilling()" /> Same as shipping</label></p>
<table id="billing-table" style="display: none;">
<tr>
<td class="label">Address Line 1</td>
<td><input type="text" class="field" id="billing-address1" placeholder="Start typing an address.." auto-complete></td>
</tr>
<tr>
<td>Address Line 2</td>
<td><input type="text" class="field" id="billing-address2"></td>
</tr>
<tr>
<td>Suburb</td>
<td><input type="text" class="field" id="billing-suburb"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" class="field" id="billing-city"></td>
</tr>
<tr>
<td>Region</td>
<td><input type="text" class="field" id="billing-region"></td>
</tr>
<tr>
<td>Postcode</td>
<td><input type="text" class="field" id="billing-postcode"></td>
</tr>
</table>
</form>
<script type="text/javascript">
// Show or hide the billing address
function toggleBilling() {
var table = document.getElementById("billing-table");
table.style.display = table.style.display === "none" ? "block" : "none";
}
// This is the callback function to initialise the address lookup script
function initAddy() {
// Shipping Address Lookup Setup
var shippingAddy = new AddyComplete(document.getElementById("shipping-address1"));
shippingAddy.fields = {
address1: document.getElementById("shipping-address1"),
address2: document.getElementById("shipping-address2"),
suburb: document.getElementById("shipping-suburb"),
city: document.getElementById("shipping-city"),
region: document.getElementById("shipping-region"),
postcode: document.getElementById("shipping-postcode")
}
shippingAddy.options.excludePostBox = true;
// Billing Address Lookup Setup
var billingAddy = new AddyComplete(document.getElementById("billing-address1"));
billingAddy.fields = {
address1: document.getElementById("billing-address1"),
address2: document.getElementById("billing-address2"),
suburb: document.getElementById("billing-suburb"),
city: document.getElementById("billing-city"),
region: document.getElementById("billing-region"),
postcode: document.getElementById("billing-postcode")
}
}
</script>
<!-- for NZ country -->
<script src="./js/addy.js?nzKey=demo-api-key&country=nz&callback=initAddy" async defer></script>
<!-- or CDN -->
<!-- <script src="https://www.addysolutions.com/address-lookup/1.6.0/js/addy.min.js?nzKey=demo-api-key&country=nz&callback=initAddy" async defer></script> -->
<!-- for AU country -->
<!-- <script src="https://www.addysolutions.com/address-lookup/1.6.0/js/addy.min.js?auKey=demo-api-key&country=au&callback=initAddy" async defer></script> -->
<!-- or CDN -->
<!-- <script src="./js/addy.min.js?auKey=demo-api-key&country=au&callback=initAddy" async defer></script> -->
</body>
</html>