How to Change textbox text into another textbox in asp.net C#?

Question

I am having two text boxes on my web page as txtGivenName and txtDisplayName. Now I want to display txtGivenName text on txtDisplayName while entering text on txtGivenName by using keypress event or keydown event. I have tried some code for achieve this but not able to get the textbox1 value on textbox2.

My Code is:

<asp:TextBox ID="txtGivenName" runat="server" onkeypress = "copyText()"  ></asp:TextBox>

Script code is:

function copyText() {

var givenName = document.getElementById("txtGivenName");
var displayName = document.getElementById("txtDisplayName");
displayName =  givenName;

}

but nothing happened while entering text on txtGivenName. Can anyone suggest me to achieve this or tell me any other way to achieve this? (Note: I dont want to do this by OnTextChanged event, Bcoz it will populate the first text box value on second one after text enter got over only. While entering the text on first textbox we need to change the text on second textbox simultanously)

Thanks.

I got the exact answer for this feature by using below mentioned script code. Solution:

function OneTextToOther() {

        var first = document.getElementById('<%= txtGivenName.ClientID %>').value;

        document.getElementById('<%= txtDisplayName.ClientID %>').value = first;

    }

Paul Abbott · Accepted Answer · 2014-05-02 18:08:49Z

1

Take a look at the page source in the browser -- "txtGivenName" and "txtDisplayName" are not going to be the IDs of the text boxes because ASP.NET prepends the IDs based on the control hierarchy so they are globally unique.

You have two options -- use "<%=txtGivenName.ClientID%>" to get the true name of the text box in javascript, or set ClientIdMode="static" on the text boxes so the IDs are left alone.

function copyText() {
    var givenName = document.getElementById("<%=txtGivenName.ClientID%>");
    var displayName = document.getElementById("<%=txtDisplayName.ClientID%>");
    displayName.value =  givenName.value;
}

edited May 2, 2014 at 18:08

answered May 2, 2014 at 18:01

Paul Abbott

7,2213 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Suryakavitha Over a year ago

I have applied your code , its working fine now. Awesome! thank you so much!

Suryakavitha Over a year ago

I am having one doubt, While removing text from txtGivenName, it has to affect on txtDisplayName also. but , If i remove the entered text on txtGivenName, still I can see the previous text on txtDisplayName textbox. How do we achieve this? any suggestions?

user1 · Accepted Answer · 2014-05-02 18:06:10Z

0

You can try keyup event but I know only Jquery method to do it.

<input class="one" type="text"/>
<input class="two" type="text"/>

$(".one").on("keyup", function(){
$(".two").val($(".one").val()); 
});

here is the demo: http://jsfiddle.net/pUpZA/

PS: the asp:textbox translates to input when you compile so its basically the same thing. use "CssClass=one" for your asp:textboxes

answered May 2, 2014 at 18:06

user1

1,0651 gold badge8 silver badges29 bronze badges

1 Comment

Suryakavitha Over a year ago

I have added the CssClass one and two on my text boxes and wrote the code on java script place as you said in the previous post, but I am not able to get the output. How can I call this inside java script?

Collectives™ on Stack Overflow

How to Change textbox text into another textbox in asp.net C#?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related