Smart Forms Using GeoIP Location
- Share /
- Uncategorized / 4.1.09 / No Comments /
GeoIP technology allows us to detect where a specific user is located based on their IP address. With MaxMind’s new JavaScript API it is easy to auto-fill any location form fields to make processes easier for users. This avoids one of the common user interface design mistakes we often encounter: the use of poor defaults.
Sample
This is a very basic but common example of how you can use this in your projects.
How it’s done
You’ll need to start by linking to a copy of jQuery and the MaxMind GeoIP JavaScript API.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"><!--mce:0--></script> <script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"><!--mce:1--></script>
If for some reason the MaxMind data service goes down, the first field will be the default. Not the end of the world. It’s estimated that services uptime is about 99.95%.
Next you’ll need an XHTML form that contains a state select (or dropdown) field. Here’s a basic one I’ve recently used in a prototype.
<form> You live in <select id="states" name="states[]"> <option value="AK">Alaska</option> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> <option value="AZ">Arizona</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DC">District of Columbia</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="IA">Iowa</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="MA">Massachusetts</option> <option value="MD">Maryland</option> <option value="ME">Maine</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MO">Missouri</option> <option value="MS">Mississippi</option> <option value="MT">Montana</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="NE">Nebraska</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NV">Nevada</option> <option value="NY">New York</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="PR">Puerto Rico</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VA">Virginia</option> <option value="VT">Vermont</option> <option value="WA">Washington</option> <option value="WI">Wisconsin</option> <option value="WV">West Virginia</option> <option value="WY">Wyoming</option> </select> </form>
Next you’ll need to add the jQuery function/process itself to make everything work. This can be included inline in the <head> of the document or externally, it doesn’t matter.
JavaScript / jQuery
$(function(){ var $state = geoip_region(); $('#states option[value='+$state+']').attr('selected','selected'); });
That’s it!
Easy as pie. Hope this helps, I know I’m pretty excited about it.
