JSFiddle - React, Tailwind, and code Playground

by heriberto perez

HTML

<script src="http://ziplookup.googlecode.com/git/public/ziplookup/zipLookup.min.js"></script>
<form>
  <table>
    <tbody>
      <tr>
        <td>Enter ZipCode:</td>
        <td><input type='text' name='zipcode' /></td>
      </tr>
      <tr>
        <td>Enter City:</td>
        <td><input type='text' name='city' /></td>
      </tr>
      <tr>
        <td>Enter State Abbr.:</td>
        <td><input type='text' name='state_short' /></td>
      </tr>
      <tr>
        <td>Enter State:</td>
        <td><input type='text' name='state' /></td>
      </tr>
      <tr>
        <td class='message' colspan="2"></td>
      </tr>
    </tbody>
  </table>
</form>

JavaScript

$(document).ready(function() {                                  // When the document loads,         
  $('input[name=zipcode]').blur(function(){                        // Set on blur
    $.zipLookup(                                            // Do a Zip code Lookup
      $(this).val(),                                      // Zip code Field Value
      function(cityName, stateName, stateShortName){      // If Successful,
        $('input[name=city]').val(cityName);            // Set City name
        $('input[name=state_short]').val(stateName);    // Set State abbreviation
        $('input[name=state]').val(stateShortName);     // Set State name
        $('.message').html("Found Zipcode");            // Add a message
      },
      function(errMsg){                                   // If Zip couldn't be found,
        $('.message').html("Error: " + errMsg);         // Add an error message
      }
    );
  });
});