<!DOCTYPE html> <html> <head> <title>TEST RUNNER — jQuery Plugin for LiveAddress API</title> <meta charset="utf-8"> <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css"> <script src="lib/jquery-2_0_2.js"></script> <script src="src/jquery.liveaddress.js"></script> <script> /** CONFIGURE **/ var htmlKey = "HtmlKey"; // Put your HTML key here var debug = true; // Toggle debug mode var testRunnerVersion = "2.0.0"; // The version of this test runner page /** PREPARE FORM(S) **/ $(function () { $('form#submitEvent').submit(function () { alert("Form submit. Verification should happen first (if necessary), then this should occur."); }); }); /** INITIALIZE **/ var liveaddress = $.LiveAddress({ key: htmlKey, // An HTML key from your account debug: debug, // Show debug stuff target: "US", addresses: [{ address1: '#street10', locality: '#locality0', administrative_area: '#administrativearea0', postal_code: '#postalcode0', country: '#country0' }, { address1: '#street11', address2: '#street21', locality: '#locality1', administrative_area: '#administrativearea1', postal_code: '#postalcode1', country: '#country1' }, { freeform: '#freeform2', country: '#country2' }, { freeform: '#freeform3', country: '#country3' }, { freeform: '#freeform4', country: '#country4' }, { address1: '#street15', locality: '#locality5', administrative_area: '#administrativearea5', postal_code: '#postalcode5', country: '#country5' }, { address1: '#street16', locality: '#locality6', administrative_area: '#administrativearea6', postal_code: '#postalcode6', country: '#country6' }, { address1: '#street17' }, { address1: '#street18', locality: '#locality8', administrative_area: '#administrativearea8', postal_code: '#postalcode8', country: '#country8' }, { address1: '#street19', locality: '#locality9', administrative_area: '#administrativearea9', postal_code: '#postalcode9', country: '#country9' }, { address1: '#street110', locality: '#locality10', administrative_area: '#administrativearea10', postal_code: '#postalcode10', country: '#country10' }, { address1: '#street111', locality: '#locality11', administrative_area: '#administrativearea11', postal_code: '#postalcode11', country: '#country11' }, { address1: '#street112', address2: '#street212', address3: '#street312', locality: '#locality12', administrative_area: '#administrativearea12', postal_code: '#postalcode12', country: '#country12' }, { address1: '#street113', address2: '#street213', address3: '#street313', address4: '#street413', locality: '#locality13', administrative_area: '#administrativearea13', postal_code: '#postalcode13', country: '#country13' }, { address1: '#street114', locality: '#locality14', administrative_area: '#administrativearea14', postal_code: '#postalcode14', country: '#country14' }, { address1: '#street115', locality: '#locality15', administrative_area: '#administrativearea15', postal_code: '#postalcode15', country: '#country15' }], waitForStreet: true // Hides autocomplete suggestions until a street is entered }); </script> <style> body { font: 400 16px/1.5em 'Open Sans', sans-serif; padding: 15px 50px; background: #F3F3F3; text-shadow: 0 1px 0 #FFF; min-width: 400px; } a { color: #1790db; } .smarty-container a { text-shadow: none; } h1, h2 { text-align: center; color: #222; text-shadow: none; } #revision, #version { font-size: 14px; padding: 0 10px; font-weight: 300; } #version { position: absolute; right: 0px; } h1 { font: 600 45px/1em 'Open Sans', 'Helvetica Neue', sans-serif; margin-bottom: 5px; } h2 { font-weight: normal; font-size: 25px; line-height: 1em; } h2 a { text-decoration: none; } form { border: 5px solid #AAA; width: 350px; background: #FFF; margin-right: 25px; margin-bottom: 25px; float: left; position: relative; } form header { padding: 10px 15px 0; background: #F0F0F0; } form header p { margin: 0; padding: 0; font-size: 12px; } form header h3 { font-weight: 300; font-size: 27px; margin: 0; padding-bottom: 10px; } form table { margin: 15px 10px; font-size: 14px; } form table td { padding: 5px; } form input[type=text], form textarea { padding: 5px 5px 3px; font: 12px/1em sans-serif; width: 160px; outline: none; } form select { outline: none; } form textarea { min-height: 40px; } form input[type=submit], form [type=image], form button { font-size: 16px; } .formNumber { background: #3d3d3d; color: #FFF; width: 25px; height: 25px; padding: 5px; text-align: center; border-radius: 20px; position: absolute; top: -15px; right: -15px; font-size: 14px; box-shadow: 0 1px 2px #222; text-shadow: none; } .clear { border: none; background: none; clear: both; } label { cursor: pointer; } </style> </head> <body> <hgroup> <h1>LiveAddress API jQuery Plugin</h1> <h2>Test Runner — by <a href="http://smartystreets.com/" target="_blank">SmartyStreets</a></h2> <span id="revision">Revision: <script>document.write(testRunnerVersion);</script> / Debug mode: <script>document.write(debug ? "on" : "off");</script></span> <span id="version">jQuery version: <script>document.write($.fn.jquery);</script> / Plugin version: <script>document.write(liveaddress.version);</script></span> </hgroup> <form id="happyPath"> <header> <h3>Happy path</h3> <p>The simplest, most traditional kind of address form</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street10"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality0"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea0"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode0"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country0"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <form id="street2"> <header> <h3>Street 2 Field</h3> <p>Traditional address form containing a street line 2 field</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street11"></td> </tr> <tr> <td>Street line 2:</td> <td><input type="text" id="street21"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality1"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea1"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode1"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country1"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <form id="freeform"> <header> <h3>Freeform</h3> <p>The entire address in a single field</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="freeform2"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country2"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <form id="twoFreeform"> <header> <h3>Two Freeform addresses</h3> <p>One might be for shipping, the other might be for billing</p> </header> <table> <tr> <td>Billing address:</td> <td><textarea id="freeform3"></textarea></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country3"></td> </tr> <tr> <td>Ship to:</td> <td><textarea id="freeform4"></textarea></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country4"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <hr class="clear"> <form id="twoAddresses"> <header> <h3>Two addresses</h3> <p>Likely, one would be a billing address, and the other would probably be shipping</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street15"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality5"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea5"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode5"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country5"></td> </tr> <tr> <td colspan="2"> <hr> </td> </tr> <tr> <td>Street address:</td> <td><input type="text" id="street16"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality6"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea6"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode6"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country6"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <form id="incomplete"> <header> <h3>Incomplete address</h3> <p>When there's not enough information to verify an address, the fields shouldn't be mapped</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street17"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <form id="onClick"> <header> <h3>onclick Handler</h3> <p>Submit button has an "onclick" attribute which should fire if the button is clicked</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street18"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality8"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea8"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode8"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country8"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form" onclick="alert('onclick handler; this should happen AFTER address verification')"></td> </tr> </table> </form> <form id="onSubmit" onsubmit="alert('onsubmit handler; this should happen AFTER address verification')"> <header> <h3>onsubmit Handler</h3> <p>Form has onsubmit="" attribute which should fire when form is submitted</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street19"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality9"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea9"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode9"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country9"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <hr class="clear"> <form id="twoHandlers" onsubmit="alert('onsubmit handler; this should happen AFTER address verification and the onclick handlers')"> <header> <h3>Two handlers</h3> <p>First the address should be verified, then the submit button's onclick handlers should fire, then the form's onsubmit handlers last</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street110"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality10"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea10"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode10"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country10"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form" onclick="alert('onclick handler; this should happen AFTER address verification and BEFORE onsubmit handlers')"> </td> </tr> </table> </form> <form id="submitEvent"> <header> <h3>Submit event handler</h3> <p>Form submit() should fire verification, if necessary, THEN a handler bound to submit, THEN submit the form.</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street111"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality11"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea11"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode11"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country11"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <form id="street3"> <header> <h3>Street 3 Field</h3> <p>Traditional address form containing street line 2 and line 3 fields</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street112"></td> </tr> <tr> <td>Street line 2:</td> <td><input type="text" id="street212"></td> </tr> <tr> <td>Street line 3:</td> <td><input type="text" id="street312"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality12"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea12"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode12"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country12"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <form id="street4"> <header> <h3>Street 4 Field</h3> <p>Traditional address form containing street line 2, line 3, and line 4 fields</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street113"></td> </tr> <tr> <td>Street line 2:</td> <td><input type="text" id="street213"></td> </tr> <tr> <td>Street line 3:</td> <td><input type="text" id="street313"></td> </tr> <tr> <td>Street line 4:</td> <td><input type="text" id="street413"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality13"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea13"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode13"></td> </tr> <tr> <td>Country:</td> <td><input type="text" id="country13"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <form id="country"> <header> <h3>Country field</h3> <p>Non-US addresses should be allowed to pass thru freely</p> </header> <table> <tr> <td>Street address:</td> <td><input type="text" id="street114"></td> </tr> <tr> <td>Locality (City):</td> <td><input type="text" id="locality14"></td> </tr> <tr> <td>Administrative Area (State):</td> <td><input type="text" id="administrativearea14"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode14"></td> </tr> <tr> <td>Country:</td> <td><select size="1" id="country14" required="required" style="width: 85%;"> <option selected="selected">Select a Country</option> <option value="US">United States</option> <option value="CA">Canada</option> <option value="GB">United Kingdom</option> </select> </td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <form id="stateDropdown"> <header> <h3>State dropdown menu</h3> <p>Option text must be a state (full name or two-letter state abbreviation). Also, if the first option is not a default value we will insert one for you.</p> </header> <table> <tr> <td>Country:</td> <td><input type="text" id="country15"></td> </tr> <tr> <td>Street address:</td> <td><input type="text" id="street115"></td> </tr> <tr> <td>Postal Code:</td> <td><input type="text" id="postalcode15"></td> </tr> <tr> <td>City:</td> <td><input type="text" id="locality15"></td> </tr> <tr> <td>State:</td> <td> <select id="administrativearea15"> <option>Select a state</option> <option value="al">AL</option> <option value="ak">AK</option> <option value="az">AZ</option> <option value="ar">AR</option> <option value="ca">CA</option> <option value="co">CO</option> <option value="ct">CT</option> <option value="dc">DC</option> <option value="de">DE</option> <option value="fl">FL</option> <option value="ga">GA</option> <option value="hi">HI</option> <option value="id">ID</option> <option value="il">IL</option> <option value="in">IN</option> <option value="ia">IA</option> <option value="ks">KS</option> <option value="ky">KY</option> <option value="la">LA</option> <option value="me">ME</option> <option value="md">MD</option> <option value="ma">MA</option> <option value="mi">MI</option> <option value="mn">MN</option> <option value="ms">MS</option> <option value="mo">MO</option> <option value="mt">MT</option> <option value="ne">NE</option> <option value="nv">NV</option> <option value="nh">NH</option> <option value="nj">NJ</option> <option value="nm">NM</option> <option value="ny">NY</option> <option value="nc">NC</option> <option value="nd">ND</option> <option value="oh">OH</option> <option value="ok">OK</option> <option value="or">OR</option> <option value="pa">PA</option> <option value="ri">RI</option> <option value="sc">SC</option> <option value="sd">SD</option> <option value="tn">TN</option> <option value="tx">TX</option> <option value="ut">UT</option> <option value="vt">VT</option> <option value="va">VA</option> <option value="wa">WA</option> <option value="wv">WV</option> <option value="wi">WI</option> <option value="wy">WY</option> </select> </td> </tr> <tr> <td></td> <td><input type="submit" value="Submit Form"></td> </tr> </table> </form> <script> $(function () { // Prevent forms, by default, from leaving the page, so we can keep testing $('form').submit(function (event) { alert("Default form submit; actual POST prevented"); return suppress(event); }); // Show the form index number so debug info can be connected to DOM elements visually $('form').each(function (idx) { $(this).append('<div class="formNumber">' + idx + '</div>'); }); }); // Enable this to prevent accidentally leaving the page /* window.onbeforeunload = function() { return "Page is attempting to leave or reload"; }; */ function suppress(event) { if (!event) return false; if (event.preventDefault) event.preventDefault(); if (event.stopPropagation) event.stopPropagation(); if (event.stopImmediatePropagation) event.stopImmediatePropagation(); if (event.cancelBubble) event.cancelBubble = true; return false; } </script> </body> </html>