<html>
<head>
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/jquery.json-2.2.min.js'></script>
<script type='text/javascript' src='js/checkoutapi-1.1.js'></script>
<script type='text/javascript'>
window.onload = function(){
log('initializing checkout');
initializeCheckoutAPI("DEMO", 'secure.ultracart.com', 'http://www.lipovox.com:3000/proxy.php');
log('getting cart instance');
getCartInstance();
log('attaching lookup function to zip element blur event');
document.getElementById('zip').addEventListener('blur', lookup);
};
function lookup(){
var zip = document.getElementById('zip');
var city = document.getElementById('city');
var state = document.getElementById('state');
log('lookup(' + zip.value + '):');
//Method 1: Asynchronously
getCityState(zip.value, {async:true, onComplete:function(result){
if(result == null){
log('result of remote call was null. something went wrong on the server.');
} else if(result.validZip){
log(' SUCCESS! ' + result.city + ' ' + result.state);
city.value = result.city;
state.value = result.state;
} else {
log(' Invalid Zip Code');
if(result.error){
log(' System Error: ' + result.error); // handle this gracefully or just ignore...
}
}
}});
//Method 2: Synchronous
/*
var result = getCityState(zip.value);
if(result == null){
log('result of remote call was null. something went wrong on the server.');
} else if(result.validZip){
log(' SUCCESS! ' + result.city + ' ' + result.state);
city.value = result.city;
state.value = result.state;
} else {
log(' Invalid Zip Code');
if(result.error){
log(' System Error: ' + result.error); // handle this gracefully or just ignore...
}
}
*/
}
function log(msg){
var div = document.getElementById('log');
var txtNode = document.createTextNode(msg);
var br = document.createElement('br');
div.appendChild(txtNode);
div.appendChild(br);
}
</script>
</head>
<body>
<table>
<tr><td>Zip Code:</td><td><input type='text' id='zip'/></td></tr>
<tr><td>City:</td><td><input type='text' id='city'/></td></tr>
<tr><td>State:</td><td><input type='text' id='state' /></td></tr>
</table>
<div id='log' style='margin-top:20px;'>
<div style='font-weight:bold'>Log Events Will Appear Below:</div>
</div>
</body>
</html> |