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?

Answer 1

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

Answer 2

This is quite easy:

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

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

Answer 3

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/