ASP.NET clicking on button after changing textbox, firing client event and server event

Question

I have a popup for change an address with 3 text box (Address, Province and ZIP) and one DropDownList for the City. Changing the ZIP code it change the province text box with an ajax call, and I want to add later populate city ddl, if I can get it work. The problem is that if I now change the ZIP code, then click outside of it and then click the save button is working good, I've the correct value in the server side function, but if I change the ZIP code and then click directly to the save button I could see the Province text changing correctly in the interface too, but in the btnSave_Click it still have the old value. I've tried to make not async the ajax call, but still nothing..

ASPX:

<table>
    <tr>
        <td>
            <label>Address</label>
            <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <label>Province</label>
            <asp:TextBox ID="txtProvince" runat="server"></asp:TextBox> 
        </td>
        <td>
            <label>City</label>
            <asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>
        </td>
        <td>
            <label>ZIP Code</label>
            <asp:TextBox ID="txtZIP" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td colspan="3"><asp:Label id="lblError" runat="server" style="color:Red" Visible="false" /></td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: center">
            <asp:ImageButton ID="btnResidenza" ImageUrl="/Images/Button/salva.png" runat="server"
                    OnClick="btnSave_Click" />
        </td>
    </tr>
</table>

jQuery:

<script type="text/javascript" language="javascript">
    $(function () {
        $(document).on('change', 'input[id*="txtZIP"]', function () {
            $.ajax({ 
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "CleanAddress.aspx/txtZIP_TextChanged",
                data: "{ZIP:'" + $("[id*='txtZIP']").val() + "'}",
                dataType: "json",
                success: function (response) {
                    $("[id*=txtProvince]").val(response.d);
                },
                error: function (result) {
                    alert("Errore! " + result.status + " - " + result.statusText);
                }
            });
        });
    });
</script>

Web Method:

[System.Web.Services.WebMethod]
public static string txtZIP_TextChanged(string ZIP)
{
    if ((ZIP.Trim() != "") && (ZIP.Length == 5))
    {
        dcListCityDataContext dc = new dcListCityDataContext();
        if (dc.City.Where(c => c.ZIP.Equals(ZIP)).Count() > 0)
        {
            string province = dc.City.Where(c => c.ZIP.Equals(CAP)).First().ID_PROVINCE.ToUpper();
            if (province != null)
            {
                return provincia;
            }
        }
    }
    return "";
}

Server Save Click:

protected void btnSave_Click(object sender, ImageClickEventArgs e)
{
    try
    {
        string result = null;

        // HERE IS THE PROBLEM, BECAUSE I HAVE THE WRONG VALUE 
        // IN txtProvince.Text IF I CHANGE THE ZIP CODE AND CLICK
        // DIRECTLY ON THE SAVE BUTTON

        Save(txtProvince.Text, ddlCity.SelectedItem.ToString(), txtZip.Text, txtAddress.Text);
        lblError.Text = "";

    }
    catch (Exception ex)
    {
        (...)
    }
}

Answer 1

It seem like this like Jquery onchange works. May be it fire only when losing focus. May be you can try use event OnkeyUp . This will update the field on any key pressed in the corresponding field.

Updated on comment: There are performance penalty using OnKeyUp but for small application, it's just fine !!!