CODEWITHSUNDEEP
c#asp.net
Ankur
Ankur

Reputation: 1021

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

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.

  1. When I type 1000 in a text box without leaving that text box I need to have the value as 1 KM in other.
  2. 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.

Upvotes: 0

Views: 2669

Answers (4)

tariq
tariq

Reputation: 2258

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>

Upvotes: 1

sangram parmar
sangram parmar

Reputation: 8726

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>

Upvotes: 0

kaps
kaps

Reputation: 478

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/

Upvotes: 0

Paritosh
Paritosh

Reputation: 11560

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">

Upvotes: 0

Related Questions