Copying the value of one textbox to another textbox does not work if Visible property is set to false

Question

User351619809 posted

I want to copy the value of on textbox1 to textbox2 when I tab out of textbox1 using jquery. TextBox2 visible property is set to false.

After copying the value from textbox1 to textbox2, I want to change the first five numbers of the textbox1 to XXXXX. In order to achieve this, I wrote the following code. The code works when both the textbox2 is visible otherwise only the changing of first 5 numbers to X's works and the copying to another text box stops working.

front end code:

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
      
                      
            
            <asp:TextBox ID="TextBox1" runat="server" onchange="mychange();" ></asp:TextBox>
            
            <asp:TextBox ID="TextBox2" runat="server" Visible="false" ></asp:TextBox>
            <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" />
        </div>
    </form>

JQuery Code:

<script>
        function mychange() {


            var name = $("#<%=TextBox1.ClientID%>").val(); 
            $("#<%=TextBox2.ClientID%>").val(name); 
            var txt1 = $('#TextBox1');
            s = txt1.val();
            if (s.length > 5) {
                s = "XXXXX" + s.substring(s.length - 4, s.length);
                txt1.val(s);
            }
        }
    </script>

I am not sure why the copying of first five numbers to another textbox stops working if I make TextBox2 invisible. How can I fix this issue.

any help will be greatly appreciated.