Multiple form example

ziptastic-multi-example.js

<script type="text/javascript">
			(function($) {
				$(function() {
					// API key and country can go here.
          var options = {
						"key": "your-api-key-here",
						"country": "US"
					}
          
					var duration = 500;
					
          var elements = {
						country: $('#country'),
						state_short: $('#state'),
						city: $('#city'),
						zip: $('#zip')
					}
          
					// Initially hide the city/state/zip
					elements.country.parent().hide();
					elements.state_short.parent().hide();
					elements.city.parent().hide();

					elements.zip.ziptastic(options)
						.on('zipChange', function(evt, country, state, state_short, city, zip) {
							// Country
							elements.country.val(country).parent().show(duration);
							// State
							elements.state.val(state).parent().show(duration);
							// City
							elements.city.val(city).parent().show(duration);
						});
          
          var mail_elements = {
						country: $('#mcountry'),
						state_short: $('#mstate'),
						city: $('#mcity'),
						zip: $('#mzip')
					}
          
					// Initially hide the city/state/zip
					mail_elements.country.parent().hide();
					mail_elements.state.parent().hide();
					mail_elements.state_short.parent().hide();
					mail_elements.city.parent().hide();
					// Initialize the ziptastic and bind to the change of zip code

					mail_elements.zip.ziptastic(options)
						.on('zipChange', function(evt, country, state, state_short, city, zip) {
							// Country
							mail_elements.country.val(country).parent().show(duration);
							// State
							mail_elements.state_short.val(state_short).parent().show(duration);
							// City
							mail_elements.city.val(city).parent().show(duration);
						});
				});
			}(jQuery));