JSFiddle - React, Tailwind, and code Playground
HTML
<script>(function(n,t,i,r){var u,f;n[i]=n[i]||{},n[i].initial={accountCode:"EVERY11143",host:"EVERY11143.pcapredict.com"},n[i].on=n[i].on||function(){(n[i].onq=n[i].onq||[]).push(arguments)},u=t.createElement("script"),u.async=!0,u.src=r,f=t.getElementsByTagName("script")[0],f.parentNode.insertBefore(u,f)})(window,document,"pca","//EVERY11143.pcapredict.com/js/sensor.js")</script>
<div class="container">
<div class="form-container">
<label for="Address1">
Address1:
<input id="Address1" type="text" value="">
</label>
<label for="PostalCode">
PostalCode:
<input id="PostalCode" type="text" value="">
</label>
<label for="Locality">
Locality:
<input id="Locality" type="text" value="">
</label>
<label for="State">
State:
<input id="State" type="text" value="">
</label>
<label for="country">
Country:
<select name="country" id="country" class="validate-select" title="Country"><option value=""> </option><option value="AF">Afghanistan</option><option value="AX">Åland Islands</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia</option><option...
CSS
.container {
display: flex;
flex-direction: column;
}
.form-container {
display: flex;
flex-direction: column;
}
.suggested {
display: flex;
flex-direction: column;
max-width: 400px;
min-height: 400px;
overflow: auto;
}
label {
flex: 2;
margin: 10px 0px;
padding: 10px;
min-width: 30px;
}
JavaScript
function validate(e) {
e.preventDefault()
console.log('validating')
}
$('button#validate-button').on('click', function(e) {
$.ajax({
url: 'https://api.addressy.com/Cleansing/International/Batch/v1.00/json4.ws',
method: "POST",
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
Key: 'PG15-JF99-KJ89-TR42',
Addresses: [{
Address1: $('input#Address1').val(),
PostalCode: $('input#PostalCode').val(),
Locality: $('input#Locality').val(),
Country: $('input#Country').val()
}]
}),
success: function (response) {
var json = JSON.stringify(response[0].Matches[0], null, '\t')
$('pre#suggested').text(json)
},
error: function (err) {
console.log(err)
}
})
e.preventDefault()
console.log('validating')
})