how to get text to be changed in one textbox in asp.net when text changed in other textbox

Question

I want to change some text in a text box on the change of another text box. I know it can be done using ontextchanged event. But my requirement is that for example. Lets take an example of converting meter to KM.

When I type 1000 in a text box without leaving that text box I need to have the value as 1 KM in other.
Now, I change 1000m to 3000m (without having the ontextchanged event fired up) and I should see 3 KM in the other text box.

In short I don't want the text box to be posted back. I know this can be done in Windows project but how it can be done in asp.net (web based). Is there any JavaScript or jQuery?

Please Help. Thanks in advance.

You can use javascript onchange event for textbox – Paritosh Jul 06 '13 at 06:16 — Paritosh, Jul 06 '13 at 06:16
@Paritosh : Can you give me a link for the same? – Ankur Jul 06 '13 at 06:17 — Ankur, Jul 06 '13 at 06:17

tariq · Accepted Answer · 2013-07-06T08:31:51.267

1

Hope this helps

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

      function Convert() {
          var meters = jQuery("#txtMeters").val();
          var kilometers = meters / 1000;
          jQuery("#txtKilometers").val(kilometers);
      }

    </script>

<title>Solution</title>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    Meters
    <asp:TextBox ID="txtMeters" ClientIDMode="Static" runat="server" onkeyup="javascript:Convert()">
    </asp:TextBox>
    /
    <asp:TextBox ID="txtKilometers" ClientIDMode="Static" runat="server">
    </asp:TextBox>Kilometers
    </div>
    </form>
</body>

</html>

edited Jul 06 '13 at 08:31

answered Jul 06 '13 at 07:22

tariq

2,193
15
26

it's the same as textchanged event of text box. I have to shift the control from txtMeters text box. then it is giving me the output – Ankur Jul 06 '13 at 07:32
ok , so u want instantaneously... check the edit now it will work :) – tariq Jul 06 '13 at 07:36
it's working now, but it's lagging behind. i.e for 1000 answer I am getting is 0.1 – Ankur Jul 06 '13 at 08:22
I fixed it. Instead of dividing it by 1000 divided it by 100. ;) – Ankur Jul 06 '13 at 08:28
no don't do that, check my edit... using onkeyup will work.. that problem was there because the event was fired as soon as the key was pressed, while as the textbox still did not have any value. – tariq Jul 06 '13 at 08:32
Superb...!!! done.... just a request I am fairly new to java scripts, can you explain me how the above code works..??? – Ankur Jul 06 '13 at 08:40
on 'keyup' event we call the convert() function, thats pretty straight forward. In this convert function line 1 selects the textbox and gets its value into the variable meters ie whatever user typed in. Then in line 2 we simply apply the mathematical conversion ie divide by 1000 and get the result in variable kilometers and then in line 3 we simply set the value of the second textbox with kilometers. – tariq Jul 06 '13 at 08:46

score 0 · Answer 2 · answered Jul 06 '13 at 06:22

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress

<script>
  function myFunction()
  {
    alert("You pressed a key inside the input field");
    // get value of textbox1, sdo the calculation
    // set value of textbox2
    var x = document.getElementById('textbox1').value;//get integer part of value
    document.getElementById('textbox2').value = x/1000 + 'km';
  }
</script>
<input type="text" id="textbox1" onkeypress="myFunction()">
<input type="text" id="textbox2">

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

Call (even better bind it to textBox event) JavaScript/jQuery function to covert from text in first text box and put in second text box.

How to bind event? See it here..

Jquery text change event

http://api.jquery.com/change/

edited May 23 '17 at 10:25

Community

1
1

answered Jul 06 '13 at 06:24

kaps

468
4
18

score 0 · Answer 4 · answered Jul 06 '13 at 06:26

try this jquery solution

add jquery library

    <asp:TextBox runat="server" ID="TextBox1" runat="server"/>
    <asp:TextBox  runat="server" ID="TextBox2" onkeyup="callFunction()" runat="server"/>
    <script type="text/javascript">
        function callFunction() {
            var TextBox2_val = $('#<%= TextBox2.ClientID %>').val();
            $('#<%= TextBox1.ClientID %>').val((parseFloat(TextBox2_val) / 1000).toString());
        }
    </script>

how to get text to be changed in one textbox in asp.net when text changed in other textbox

4 Answers4