I'm currently working on a project that involves inputting zip codes and retrieving the corresponding city information from . In the future, I plan to parse this data and store it as variables in my program while potentially using longitude/latitude for more specific regions.
After entering an initial zip code with the provided code below, everything works correctly, and I receive an alert with the JSON result as intended. However, if I change the zip code and submit it again, the program stops functioning properly. The updated zip is visible in the URL, but it disappears from the text input field, and the city function doesn't execute. It requires a second submission to work again. What could be causing this issue, and how can I fix it?
Is using www.zippopotam.us/ a suitable approach for this project, or are there better alternatives available?
.
<div id="location">
<form onsubmit="city()">
<input type="text" name="loc" id="loc" />
</form>
</div>
function city(){
var zip = $('#loc').val();
var client = new XMLHttpRequest();
client.open("GET", "http://api.zippopotam.us/us/"+zip, true);
client.onreadystatechange = function() {
if(client.readyState == 4) {
alert(client.responseText);
};
};
client.send();
}