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

Question

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.

Answer 1

Remove the visibility property of the first textbox from the HTML and add functionality in JS code as shown below to handle hiding the element in JS itself.

< script >
  window.addEventListener('load',()=>{
  
  document.querySelector("#<%=TextBox1.ClientID%>").style.display = "none";
  
  });
  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>

Answer 2

Instead of using visible:false you simply use display:none property which work the same way.

Why this happens: When an item (element) is set to visible: false in ASP.net that means its not being rendered at all on the client side. So technically it does not exist in the DOM at all.

Solution: Just set the CSS of your TextBox2 to display: none and remove visible:false from <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

Working Demo:

function mychange() {
  var name = $("#TextBox1").val();
  $("#TextBox2").val(name);
  var txt1 = $('#TextBox1');
  var s = txt1.val();
  if (s.length > 5) {
    s = "XXXXX" + s.substring(s.length - 4, s.length);
    txt1.val(s);
  }
  console.log('Hidden Input value: ' + $("#TextBox2").val()) //display the value
}

#TextBox2 {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
  <div>
    <input type="text" ID="TextBox1" runat="server" onchange="mychange();" placeholder="Type something > 5" />
    <input type="text" ID="TextBox2" runat="server"/>
    <Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click">
      Test
    </Button>
  </div>
</form>