onchange value in textfied should reflect others

tia_kamakshi
tia_kamakshi used Ask the Experts™
on
Hi,

I have 2 textfields with same name with slight different

if first text field name is txtBox then other text field name is txtBoxa. Means "a" will be added on another text field

Now, I wanted if someone changes the value in txtBox the same should be reflected in txtBox2

Can you please help me in this? Please code should work on all browsers like mozila, ie, chrome, safari etc

Please help me on this also please find my code below

Kind Regards
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    
    <script language="javascript">
    
    function fillTextBox(object field)
    {
        var newField = field.Name+"a";
        document.getElementById(newField).value = 
        field.value;
    }
    
    </script>
    
    
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
         
        <br />
        1. <input id="txtBox" type="text" onchange="javascript:fillTextBox(this)" /><br />
        2. <input id="txtBoxa" type="text" onchange="javascript:fillTextBox(this)" />
        </div>
    </form>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Can you use jquery?  The code will be much simpler in jquery:

$('#txtBox').change(function() {
  $('txtBoxa').html($(this).val());
});
Otherwise you could set the values as such:

function fillTextBox()
    {
        document.getElementById("txtBoxa").value = document.getElementById("txtBox").value;
    }
check this..
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    
    <script type="text/javascript">
    
    function fillTextBox(field)
    {
        var newField = field.id+"a";
        alert(newField);
        document.getElementById(newField).value = field.value;
    }
    
    </script>
    
    
    
</head>
<body>
    <form id="form1">
    <div>
         
        <br />
        1. <input id="txtBox" type="text" onchange="fillTextBox(this)" /><br />
        2. <input id="txtBoxa" type="text" onchange="fillTextBox(this)" />
        </div>
    </form>
</body>
</html>

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
onkeyup="document.getElementsByName(this.name+'a')[0].value=this.value"

You may want to set onblur, onchange,... instead or additionaly depend your needs
sorry, remove alert in the source code...
leakim971Multitechnician
Top Expert 2014

Commented:
onkeyup="document.getElementsByName(this.name+'a')[0].value=this.value"

You may want to set onblur, onchange,... instead or additionaly depend your needs
Kiran SonawaneProject Lead
Top Expert 2011

Commented:
Very simple. Just single line of code. And it works for all browsers

<html>
   <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="JavaScript" type="text/javascript"></script> 
     <script>
        $(document).ready(function () {
          $('#txtBox').keyup(function(){
             $('#' + this.id + 'a').val($(this).val());
          });
        });
     </script>
   </head>
   <body>
<form id="form1" runat="server">
 <div>
         
        <br />
        1. <input id="txtBox" type="text"/><br />
        2. <input id="txtBoxa" type="text" />
        </div>
    </form>
    </body>
    </html>

Open in new window

Author

Commented:
Thanks all for your help

A.) I am sorry, I have never used jquery before. I tried using solution given by ansudhindra and it is giving me following activex error
 javascript-activeXalert
I don't want this message.

B.) Additionally sonawanekiran solution will work for all controls, which I donot wanted. I wanted to do this for specific controls.

Also, the other field which I am saying has text "a" at the last is basically the asp.net textbox control id for that particular field, so I think that I cannot use this solution.

I have couple of fields which will have one control in htmll and other in .net texbox control with same name but it has client id in the last something like this

1. <input id="txtBox" type="text"/><br />
2. <input id="txtBoxa<%= txtBoxa.ClientID%>" type="text" />

so, i am not sure how jquery or other script can be modified on this.

Please suggest
leakim971Multitechnician
Top Expert 2014

Commented:
Your fields have ID and not Name attribute

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    
    <script language="javascript">
    
    function fillTextBox(obj)
    {
        var newField = obj.id + "a";
        document.getElementById(newField).value = obj.value;
    }
    
    </script>
    
    
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
         
        <br />
        1. <input id="txtBox" type="text"  onchange="fillTextBox(this)" onblur="fillTextBox(this)" onkeyup="fillTextBox(this)" /><br />
        2. <input id="txtBoxa" type="text"/>
        </div>
    </form>
</body>
</html> 

Open in new window


else inline, using ID instead Name :
onkeyup="document.getElementById(this.id+'a').value=this.value"

Author

Commented:
Hi leakim971,

Looks we both have added the comments at same time. Please see my comments above

Thanks for your help

Kind Regards
Kiran SonawaneProject Lead
Top Expert 2011

Commented:
Just add below code in in head tab and check. I am considering your textbox as below
1. <input id="txtBox" type="text"/><br />
2. <input id="txtBoxa<%= txtBoxa.ClientID%>" type="text" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="JavaScript" type="text/javascript"></script> 
     <script>
        $(document).ready(function () {
          $('#txtBox').keyup(function(){
             $('input[id^=txtBoxa]').val($(this).val());
          });
        });
     </script>

Open in new window

Kiran SonawaneProject Lead
Top Expert 2011

Commented:
May be this will help you
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    
    <script language="javascript">
    
    function fillTextBox(obj)
    {
        var newField = obj.id + "a" + <%= txtBoxa.ClientID%>;
        document.getElementById(newField).value = obj.value;
    }
    
    </script>
    
    
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
         
        <br />
        1. <input id="txtBox" type="text"  onchange="fillTextBox(this)" onblur="fillTextBox(this)" onkeyup="fillTextBox(this)" /><br />
        2. <input id="txtBoxa" type="text"/>
        </div>
    </form>
</body>
</html>

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
I don't understand the purpose of the use of .ClientID

Are you using asp:TextBox or input? The the second case it's a nonsense
If you're using asp:TextBox and use jQuery use :

$('#<%= txtBox.ClientID %>').keyup(function(){

Open in new window


or

$('#<%= txtBox.ClientID %>').bind("keyup change blur click", function(){

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
Test page (tested and work) :
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            var dotnet = [];
            dotnet["<%= txtBox.ClientID %>"] = "<%= txtBoxa.ClientID %>";

            $('#<%= txtBox.ClientID %>').bind("keyup change blur click", function(){
                $("#" + dotnet[$(this).attr("id")]).val( $(this).val() );
            })            
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<asp:TextBox ID="txtBox" runat="server"></asp:TextBox>    
<asp:TextBox ID="txtBoxa" runat="server"></asp:TextBox>    
    </div>
    </form>
</body>
</html>

Open in new window

Multitechnician
Top Expert 2014
Commented:
with INPUT tag (tested and work) :
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
        function fillTextBox(obj) {
            var newField = obj.id + "a";
            document.getElementById(newField).value = obj.value;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<input type="text" ID="txtBox" onclientclick="fillTextBox(this)" onkeyup="fillTextBox(this)" onchange="fillTextBox(this)" onblur="fillTextBox(this)" />    
<input type="text" ID="txtBoxa" />
    </div>
    </form>
</body>
</html>

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
replace : onclientclick
by : onclick
leakim971Multitechnician
Top Expert 2014

Commented:
if you use a copy/paste only with mouse it will not work, onpaste don't work on all browser jQuery or not
so the only way to sync is to use a timer if you want to handle the "paste with mouse" change

the better way to handle your problem is to sync when you submit your form if at the end your field is a hidden field.

Author

Commented:
Many Thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial