Auto Fill Textbox in ASP.NET depending on the text typed in another textbox

Question

how to fill textbox in asp.net while i am typing in another text .. changes in one textbox will affect in another textbox auto.. and without refreshing my page.

Solution 1

Ok, try this. You will need the AJAX Control Toolkit. So read the article Installing AJAX Control Toolkit 4 in Visual Studio 2010 to see how to install it in Visual Studio.

Then you need to add a ScriptManager to your ASPX page. You will need to add the following code:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

What you then need to do, is add an UpdatePanel to your page. Inside this update panel, you need to place the textbox. This means that only the controls inside the update panel will refresh, and not the whole page. To do this, add the following code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>

     <!--Add your Textbox Control to update here: Textbox1-->
     <asp:TextBox ID="Textbox1" runat="server" ReadOnly="True"></asp:TextBox> 
     <asp:TextBox ID="Textbox2" runat="server" ReadOnly="True" ontextchanged="Textbox2_TextChanged"></asp:TextBox>                             

  </ContentTemplate>
    <Triggers>
       <!--This is the textbox you will be typing text into: TextBox2-->
       <asp:AsyncPostBackTrigger ControlID="Textbox2" EventName="TextChanged" />
    </Triggers>
</asp:UpdatePanel>

The Trigger tells your page which control on the form needs to initiate the postback. Now in your .cs file, you need to add the event handler for the Textbox2 TextChanged event. Add the following code:

protected void Textbox2_TextChanged(object sender, EventArgs e)
{
    // Set the text of textbox1 = textbox2
}

I hope that this helps.

Solution 2

No need for AJAX. JQuery is enough. The code will do it

$('#text1').bind('keyup', function(){

   $('#text2').val($('#text1').val());

});

Assuming

1. text1 id of box writing into.
2. text2 textbox that text gets copied to

in .Net you will have to use client id to get the correct id so it may look like this

$('<%=text1.ClientID%>').bind('keyup', function(){

   $('<%=text2.ClientID%>').val($('#text1').val());

});

Oh and wrap it up in $(document).ready as per standard. And of coures you need to include the JQuery library to your page.

No posting back or page refreshes at all. It's your lightest solution and easy to implement.

Solution 3

You will need to use Javascript to accomplish this. ASP.Net code runs on the server side, which means it cannot affect the page without a postback happening first. Read up on the OnTextChanged event and how to hook into it with javascript. There is a javascript library called jQuery which makes everything easier, though it isn't strictly necessary.