Share Blog

Monday, May 19, 2014

How to Move to Next Textbox in asp.net using Javascript

Default.aspx Design Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head id="Head1" runat="server">
    <script type="text/javascript">
        function test(t, id) {
            if (t.length >= 3) {
                var num = id.slice(-1);
                var id1 = parseInt(num, 10) + 1;
                document.getElementById("t" + id1).focus();
            }
        }
    </script>
    <title>How to Move to next textbox in asp.net using javascript</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      
        <asp:TextBox ID="t1" runat="server" onkeypress="javascript:test(this.value,this.id)" Width="40px"  ></asp:TextBox><b>-</b>
        <asp:TextBox ID="t2" runat="server"  onkeypress="javascript:test(this.value,this.id)" Width="40px"> </asp:TextBox><b>-</b>
        <asp:TextBox ID="t3" runat="server"  onkeypress="javascript:test(this.value,this.id)" Width="40px"></asp:TextBox><b>-</b>
        <asp:TextBox ID="t4" runat="server" MaxLength="4" Width="40px"></asp:TextBox>
    </div>
    </form>
</body>

</html>



Page Lode Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
            t1.Focus();
    }
}
RESULT

No comments:

Post a Comment