Autofill state/city


#1

is there a way to autofill state/city when zipcode is entered

thank you


#2

I’d say the easiest approach would be to build this yourself for a limited number of zipcodes, so your prototype can demonstrate the concept. You could take like 3 or 4 zipcodes near you and test for these with conditional cases–filling in the corresponding state and city. Maybe any other zipcode could result in fake-representative results, like “Your State” “Your City” so observers or test participants could understand how it works.

To do this in Axure, you’ll want to set up your ZIP text field as (the default) “alphanumeric” type. It won’t work if you set it to “numeric” because dynamic changes to numeric fields are not detected by Axure. You can add in error-checking with a conditional case that ignores alpha chars (or shows error) and set the max length of the text field widget to 5 (or 10 if you’re accepting zip extension.) Drag in a button and assign the text field’s Submit button. You can hide this button if needed, but it will process the field’s data when user presses the Enter key (and you can add a Lost Focus event to trigger the button’s Click or Tap event so it gets processed if the user presses Tab or otherwise clicks away from the ZIP field.) Then you can add a conditional case for each supported ZIP, so it might look something like this:

If MyZIPField is not numeric
Show MyZIPerror
Else If text on MyZIPField is one of “02108”, “02109”, or “02110”
Set MyCityField to “Boston”
Set MyStateField to “MA”
Else If text on MyZIPField is one of “02114”, “02134”, or “02138”
Set MyCityField to “Cambridge”
Set MyStateField to “MA”
…etc.

// When you assign a conditional case, you can select “text on” and point to a widget, then select “is” then select “one of” then enter as many zipcodes as you need for a given city

Another approach that could support more ZIP codes (but still a limited set) might be to use a repeater that contains the ZIP, City and State text fields. There are many places you can get a list of ZIP codes per state and city, and if you can find or convert one to three columns (ZIP, City, State) you could use this data for your repeater columns. Leave the fields blank (maybe the first row is blank, or the repeater’s Loaded event could apply a filter to hide all rows.) Then when user enters a zipcode, filter the repeater for that zipcode number, which would result in showing only one row with ZIP, City and State fields filled automatically.

If you think you need full functionality for any and every zipcode, I’d recommend you think again, in terms of minimum effort and time needed for your prototype’s purpose. That said, you could theoretically use javascript injection to call an auto-lookup service, like Google’s API, described here:
https://nobleintentstudio.com/blog/zip-code-to-city-state-lookup/


#3

@mbc66 thank you very much for the detailed explanation - this helps :slight_smile: