How to synchronize two text box form values?

Question

Hi all i am new to jQuery. Suppose I have two HTML text boxes. How can I make it happen that if I write in text box A then same value goes to textbox B and if I write in B then it goes to A and same as delete the text. How can this be done in jQuery?

score 46 · Accepted Answer · edited May 24 '19 at 03:01

46

This is a more dynamic way using jQuery:

$(document).ready(function() {
  $(".copyMe").keyup(function() {
    $(".copyMe").val($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="copyMe" type="text" placeholder="Enter a text"/>
<input class="copyMe" type="text" />
<input class="copyMe" type="text" />
<input class="copyMe" type="text" />

edited May 24 '19 at 03:01

Teocci

7,189
1
50
48

answered Sep 22 '11 at 14:11

JNDPNT

7,445
2
34
40

Thanks man your solution can work for n text boxes. Thanks for help. – ali nouman Sep 22 '11 at 14:24
2

Cool, but this solution does not work when copying the text into the text field (by using the mouse). In this case one could use .change() – zarathustra Oct 25 '16 at 09:03

score 5 · Answer 2 · answered Sep 22 '11 at 14:09

5

This is quite easy:

$("#textBoxA").keyup(function(){
   $("#textBoxB").val($("#textBoxA").val());
});

$("#textBoxB").keyup(function(){
   $("#textBoxA").val($("#textBoxB").val());
});

answered Sep 22 '11 at 14:09

Snicksie

1,987
17
27

score 4 · Answer 3 · answered Oct 23 '11 at 04:50

4

A slightly more efficient way than the most upvoted answer is:

var $inputs = $(".copyMe");  
$inputs.keyup(function () {
     $inputs.val($(this).val());
});

http://css-tricks.com/snippets/jquery/keep-text-inputs-in-sync/

answered Oct 23 '11 at 04:50

Barka

8,764
15
64
91

score 1 · Answer 4 · answered Dec 22 '16 at 14:59

I ran into this challenge today. I made a small plugin to make the code more readable and to handle text inputs, but also select fe.

When you include the plugin, you can simply use $("selector").keepInSync($("otherselector"));

$.fn.keepInSync = function($targets) {
  // join together all the elements you want to keep in sync
  var $els = $targets.add(this);
  $els.on("keyup change", function() {
    var $this = $(this);
    // exclude the current element since it already has the value
    $els.not($this).val($this.val());
  });
  return this;
};

//use it like this
$("#month1").keepInSync($("#month2, #month3"));
$("#text1").keepInSync($("#text2"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Two way sync</h1>
<select id="month1">
  <option value="">Please select a moth</option>
  <option value="jan">January</option>
  <option value="feb">February</option>
  <option value="mar">March</option>
</select>
<select id="month2">
  <option value="">Please select a moth</option>
  <option value="jan">1</option>
  <option value="feb">2</option>
  <option value="mar">3</option>
</select>
<select id="month3">
  <option value="">Please select a moth</option>
  <option value="jan">Jan</option>
  <option value="feb">Feb</option>
  <option value="mar">Mar</option>
</select>
<br>
<input type="text" id="text1">
<input type="text" id="text2">

score 0 · Answer 5 · answered Sep 22 '11 at 14:09

0

You'll have to put a function call on each textbox's onchange events, that will take the value of one box and put it in the other.

answered Sep 22 '11 at 14:09

MeLight

5,454
4
43
67

score 0 · Answer 6 · answered Sep 22 '11 at 14:19

0

Using Snicksie's method, you can see the live demo below. I have included a button to reset the textbox values as well.

http://jsfiddle.net/refhat/qX6qS/5/

answered Sep 22 '11 at 14:19

defau1t

10,593
2
35
47

How to synchronize two text box form values?

6 Answers6

Linked