Solution Timeline

All versions (edits) of solutions to HTML form that populates the city and state given the zip code appear below in the order they were created. Comments that appear under revisions were those created when that particular revision was current.

To see the revision history of a single solution (with diffs), click on the solution number (ie. "#1") in the upper right corner of a solution revision below.

← Bounty Expand all edits

Here is my solution: https://gist.github.com/3904626.

It's a single file, but it was necessary a bit of server-side code (in this case PHP) to overcome the Access-Control-Allow-Origin errors, since WebserviceX.NET doesn't return data in JSON-P.

I've implemented client-side and server-side validation for the zip code so it should run smoothly.

You will need an external PHP file to read the web service and return the output to you as the URL fails the Same origin policy

main file - check this fiddle http://jsfiddle.net/blackpla9ue/jy9TT/1/

<script type="text/javascript">
$("input[name='zip']").bind('change keyup', function(){

    var zipcode = $(this).val();
    var isValidZip = /(^\d{5}$)|(^\d{5}-\d{4}$)/.test(zipcode);
    var webservice = "http://www.webservicex.net/uszip.asmx/GetInfoByZIP";

    if(isValidZip){
        $loader.show();
        $.ajax({
            url: 'proxy.php?url=' + webservice + '?USZip=' + zipcode,
            datatype: 'xml',
            success: function(data){
                $loader.hide();

                if($(data).find('CITY').length){
                    $("input[name='city']").val($(data).find('CITY').text());
                    $("input[name='state']").val($(data).find('STATE').text());
                }
            }                
        });            
    }

});
</script>

<ul>
    <li>
        <label>Zip Code : </label>
        <input type="text" name="zip" />
        <span class="loading">loading..</span>
    </li>
    <li>
        <label>City: </label>
        <input type="text" name="city" />
    </li>
    <li>
        <label>State : </label>
        <input type="text" name="state" />
    </li>
</ul>

proxy.php

<?php echo @file_get_contents($_GET['url']);?>

Here is my solution: https://gist.github.com/3904626.

It's a single file, but it was necessary a bit of server-side code (in this case PHP) to overcome the Access-Control-Allow-Origin errors, since WebserviceX.NET doesn't return data in JSON-P. I've implemented client-side and server-side validation for the Zip + 4 so it should run smoothly.

The only requirement is that you name the file zip.php, if you change the file name (or split the server-side from the client-side code) you should update line 151 as well.

Winning solution

The fiddle alone will not work because you need an external PHP file to read the web service and return the output to you as the URL fails the Same origin policy

main file - check this fiddle http://jsfiddle.net/blackpla9ue/jy9TT/1/

<script type="text/javascript">
$("input[name='zip']").bind('change keyup', function(){

    var zipcode = $(this).val();
    var isValidZip = /(^\d{5}$)|(^\d{5}-\d{4}$)/.test(zipcode);
    var webservice = "http://www.webservicex.net/uszip.asmx/GetInfoByZIP";

    if(isValidZip){
        $loader.show();
        $.ajax({
            url: 'proxy.php?url=' + webservice + '?USZip=' + zipcode,
            datatype: 'xml',
            success: function(data){
                $loader.hide();

                if($(data).find('CITY').length){
                    $("input[name='city']").val($(data).find('CITY').text());
                    $("input[name='state']").val($(data).find('STATE').text());
                }
            }                
        });            
    }

});
</script>

<ul>
    <li>
        <label>Zip Code : </label>
        <input type="text" name="zip" />
        <span class="loading">loading..</span>
    </li>
    <li>
        <label>City: </label>
        <input type="text" name="city" />
    </li>
    <li>
        <label>State : </label>
        <input type="text" name="state" />
    </li>
</ul>

proxy.php

<?php echo @file_get_contents($_GET['url']);?>

Tipped

HTML :
http://jsfiddle.net/YV7pU/
css: style.css
http://jsfiddle.net/EUryZ/

No php script, just an ajax call. Everything in HTML.