How do I make a Textbox Postback on KeyUp?

Russ Bradberry picture Russ Bradberry · Nov 18, 2009 · Viewed 61.7k times · Source

I have a Textbox that changes the content of a dropdown in the OnTextChanged event. This event seems to fire when the textbox loses focus. How do I make this happen on the keypress or keyup event?

Here is an example of my code

<asp:TextBox ID="Code" runat="server" AutoPostBack="true" OnTextChanged="Code_TextChanged">                

<asp:UpdatePanel ID="Update" runat="server">
    <ContentTemplate>
        <asp:DropDownList runat="server" ID="DateList" />             
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Code" />
    </Triggers>
</asp:UpdatePanel>

So in the codebehind, I bind the dropdown on page load. The Code_TextChanged event just rebinds the dropdown. I would like this to happen on each keypress rather than when the textbox loses focus.

I inherited this code recently and this is not the ideal method of doing this for me, but time limitations prevent me from rewriting this in a web servicy method.

I have tried using jQuery to bind the "keyup" event to match the "change" event for the textbox, but this only works on the first key pressed.

Answer

CoderHawk picture CoderHawk · Nov 20, 2009

This will solve your problem. Logic is same as the solution suggested by Kyle.

Have a look at this.

<head runat="server">
<title></title>
<script type="text/javascript">
    function RefreshUpdatePanel() {
        __doPostBack('<%= Code.ClientID %>', '');
    };
</script>

    <asp:TextBox ID="Code" runat="server" onkeyup="RefreshUpdatePanel();" AutoPostBack="true" OnTextChanged="Code_TextChanged"></asp:TextBox>
    <asp:UpdatePanel ID="Update" runat="server">
        <ContentTemplate>
            <asp:DropDownList runat="server" ID="DateList" />
            <asp:TextBox runat="server" ID="CurrentTime" ></asp:TextBox>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Code" />
        </Triggers>
    </asp:UpdatePanel>

Code behind goes like this...

 protected void Code_TextChanged(object sender, EventArgs e)
    {
        //Adding current time (minutes and seconds) into dropdownlist
        DateList.Items.Insert(0, new ListItem(DateTime.Now.ToString("mm:ss")));

        //Setting current time (minutes and seconds) into textbox
        CurrentTime.Text = DateTime.Now.ToString("mm:ss");
    }

I have added additional textbox to see change in action, do remove the textbox.