Autofilling state and city based on zip code
Solution 1
This should work for you. http://jsfiddle.net/7VtHc/5/
I will added that ===
in JavaScript will check that type are the same. See Here.
There is no need to create an is_int()
function.
$(document).ready(function() {
$("#zip").keyup(function() {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
url: "http://zip.elevenbasetwo.com",
cache: false,
dataType: "json",
type: "GET",
data: "zip=" + el.val(),
success: function(result, success) {
$("#city").val(result.city);
$("#state").val(result.state);
}
});
}
});
});
P.S. When you create a JSFiddle make sure you include jQuery from the menu on the right.
Solution 2
For India you can use pincode API for free, You can get the city with other information as JSON format.
Example: https://api.postalpincode.in/pincode/641001
Usage: https://api.postalpincode.in/pincode/${Your-pincode}
If any cors Policy occured means use this :
https://cors-anywhere.herokuapp.com/https://api.postalpincode.in/pincode/${Your-Pincode}
Example:
{
"Name": "Coimbatore",
"Description": null,
"BranchType": "Head Post Office",
"DeliveryStatus": "Delivery",
"Circle": "Tamilnadu",
"District": "Coimbatore",
"Division": "Coimbatore",
"Region": "Coimbatore",
"Block": "Coimbatore South",
"State": "Tamil Nadu",
"Country": "India",
"Pincode": "641001"
}
I am using this in Angular-8
Thanks.
user3361043
Updated on June 14, 2022Comments
-
user3361043 almost 2 years
I am new to web development and I ran into an issue with a registration form that I'm building for our business. I am using this guide: http://css-tricks.com/using-ziptastic/. This is my first experience with AJAX and JSON and I just can't get the city and state to autofill as soon as I'm done typing in the zip code. Any solutions/suggestions/alternatives will be much appreciated. I set up a basic jsfiddle to test everything out: http://jsfiddle.net/7VtHc/
HTML:
<p>Zip Code: <input type="text" id="zip" /></p> <p>City: <input type="text" id="city" /></p> <p>State: <input type="text" id="state" /></p>
jQuery, etc.
$("#zip").keyup(function() { var el = $(this); if ((el.val().length == 5) && (is_int(el.val()))) { $.ajax({ url: "http://zip.elevenbasetwo.com", cache: false, dataType: "json", type: "GET", data: "zip=" + el.val(), success: function(result, success) $("#city").val(result.city); $("#state").val(result.state); }); } });
-
JustJohn about 8 yearsThis helped me too. Remember to empty the city and state if you decide to backup and add a different zip. I put it right inside the keyup:
$("#zip").keyup(function () { $("#city").val(null); $("#state").val(null)
-
RationalRabbit almost 7 yearsThe trouble with ZipTastic is it will only come up with one city per zip code. There are other factors to consider, also. I can't display all the code here ... it's complicated. But I will list some things to consider if correct data is really important. 1) You should return every city/state available for a zip and put it in a dropdown. 2) Also allow a city/state lookup so if user changes the city or state after results to something that is incorrect, an error will be produced.