Question

I am starting to write some javascript for my site to create a better user experience but i am getting a little confused on what exactly is happening, and maybe it is clearly evident to someone else what I am doing wrong or missing. I have two javascript functions that work perfect after the first time of use and if you use it slowly (sometimes it skips the next item and selects nothing if you press two keys too fast). I feel that I am missing some sort of $(document).ready(function() {}); implementation to make sure that each process has finished before it moves on. I have two textboxes that the user puts in two numbers then it moves on to the next tab element (the next textbox). The textboxes are also in an asp.net update panel if that has any impact.

    function selectall(item) {
            $(item).focus().select();
    };

    function selectNext(textBox) {
        if ($(textBox).val().length == 2) {
            $(textBox).next().focus().select();
        }
    };

        <asp:TextBox ID="Text1" runat="server" Width="30px" AutoPostBack="True"  onkeyup="selectNext(this);" onclick="selectall(this);"
    Height="20px"></asp:TextBox>:
                <asp:TextBox ID="Text2" runat="server" Width="30px" AutoPostBack="True" onkeyup="selectNext(this);" onclick="selectall(this);"
    Height="20px"></asp:TextBox>
                 <asp:DropDownList ID="Text2" runat="server"

Answer 1

Why do you need to contain the textboxes in an UpdatePanel?

It’s possible that the AutoPostback you have set on your textboxes is causing issues with your jQuery since a page post back will occur whenever the TextBox control loses focus.

I would take your textboxes out of your UpdatePanel, remove the AutoPostback and place your JavaScript in a document.ready.

Edit

Code snippet:

$(document).ready(function() {
    $("#fname").keyup(function() {
        selectNext($(this));
    });

    $("#fname").focus(function() {
        $(this).select();
    });

    $("#lname").keyup(function() {
        selectNext($(this));
    });

    $("#lname").click(function() {
        $(this).select();
    });
});

function selectNext(textBox) {
    if (textBox.val().length == 2) {
        setTimeout(function() {
            textBox.next().focus().select();
        }, 5);
    }
}