Javascript to update a textbox based on the input of another textbox

Question

I basically want to use javascript to have 2 textboxes that depend on each other. For example if I input a number x in textbox1, I want textbox2 to instantly update with x*2. If I input x into textbox2, I want textbox1 to be automatically updated with x/2. These values will always be numbers.

Edit: so here is my html file. Can anyone give me a hint to why it's not working?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $("#text1").keyup(function(){
            $("#text2").val($(this).val() * 2);
        });
        $("#text2").keyup(function(){
            $("#text1").val($(this).val() / 2);
        });        
    </script>
</head>
<body>
    <input type="text" name="text1" size=3 maxlength=6>
    <input type="text" name="text2" size=3 maxlength=6>
</body>
</html>

Sounds awesome, let us know how it turns out. If you have questions if/when you try/fail, post back here with your sample code. — Madbreaks
– Madbreaks, Commented May 10, 2012 at 20:17
Something similar was asked here: stackoverflow.com/questions/2977428/… — Farhan Ahmad
– Farhan Ahmad, Commented May 10, 2012 at 20:20

rjz · Accepted Answer · 2012-05-10 20:20:23Z

2

In the very simple case, this should do it (fiddle here):

// in a <script>:
window.update = function() {
  var one = document.getElementById('one'),
      two = document.getElementById('two');    

  two.value = parseInt(one.value) * 2;
}

<!-- in your HTML: -->
<input id="one" type="text" onchange="update();" />
<input id="two" type="text" />

answered May 10, 2012 at 20:20

rjz

16.5k3 gold badges39 silver badges35 bronze badges

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

1 Comment

rjz Over a year ago

If you're planning to do even slightly more DOM manipulation, however, you would be much better off adopting a framework such as jQuery.

Elliot Bonneville · Accepted Answer · 2012-05-10 20:19:45Z

1

$("#textbox1").onkeyup(function() {
    $("#textbox2").val($(this).val() * 2);
});

$("#textbox2").onkeyup(function() {
    $("#textbox1").val($(this).val() / 2);
});

answered May 10, 2012 at 20:19

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

Comments

David Kirby · Accepted Answer · 2012-05-10 20:18:01Z

0

I'm unable to test out the exact code you'll need for this right now, but the basic idea is to put an OnKeyUp event on each box and modify the other box through the script (using getElementById or whichever method you like)

I will try to put together some code when I can if someone else doesn't get to it first.

answered May 10, 2012 at 20:18

David Kirby

981 silver badge8 bronze badges

Comments

voscausa · Accepted Answer · 2012-05-10 20:19:47Z

0

Use an onchange event or a jquery change callback to update the other boxes.

answered May 10, 2012 at 20:19

voscausa

11.8k2 gold badges43 silver badges70 bronze badges

Comments

Sagar Dixit · Accepted Answer · 2017-11-03 02:57:41Z

0

In the this case, this should do it : http://jsfiddle.net/du09jhpd/

window.update = function() {
  var one = document.getElementById('one'),
      two = document.getElementById('two');    

  two.value = parseInt(one.value) * 2;
}
window.update1 = function() {
  var one = document.getElementById('one'),
      two = document.getElementById('two');    

  one.value = parseInt(two.value) / 2;
}

answered Nov 3, 2017 at 2:57

Sagar Dixit

1

Collectives™ on Stack Overflow

Javascript to update a textbox based on the input of another textbox

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related