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

Answer 1

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

Two way sync

  Please select a moth
  January
  February
  March


  Please select a moth
  1
  2
  3


  Please select a moth
  Jan
  Feb
  Mar