Question

I have an ajax driven zip code lookup. The call to the service happens on keyup after the field has reached the required number of characters (5 for zip). However, if a user continues typing (6+ characters) even though they don’t show in the field, the ajax call is being made and returning with a data is null error:

html

<input type="text" value="" id="billZipCode" name="billZipCode" class="smallInput coreAddrBill" maxlength="5">

javascript

//show city/state on input maxlength
$("input#billZipCode").live("keyup", function( event ){
    if(this.value.length == this.getAttribute('maxlength')) {
        if ($(this).valid() == true ) {
            zipLookup(this, "USA");

        }
    }
});


//zip code lookup
function zipLookup(myField, myCountry) {


    $.ajax({
        type: "POST",
        url: postalCodeLookupURL,
        dataType:"text json",
        data: { postalcode: $(myField).val(), country: myCountry },
        success: function(data) {
            var isError = data.isError;
            var city = data.city;
            var juris = data.juris;
            if(isError == "false"){

                    $(myField).parent().next('div').find('input').val(city);
                    $(myField).parent().next('div').next('div').find("select option[value='" + juris +"']").attr('selected', 'selected');
                    $("#createAccount").validate().element($(myField).parent().next('div').find('input'));
                    $("#createAccount").validate().element($(myField).parent().next('div').next('div').find("select"));

            }


        },
        error: function(){
        alert('failure');
      }

     });


}

Answer 1

//Live is depreciated,use delegate and some other tweaks
    $("body").delegate("input#billZipCode","keyup", function( event ){
        if($(this).val().length >= $(this).attr('maxlength')) {          
                zipLookup(this, "USA");

        }else{
         alert('Max reached');
      }
    });