Learning jQuery

You may have seen on websites when as you type in one textbox, the same text gets copied to another textbox. In this short post, you will learn how can you implement the same functionality using jQuery.

All one need to do is to bind keyup event on textbox and then copy textbox value to another textbox. Below jQuery code will copy text from txtFirst and copy it to txtSecond.

$(document).ready(function() {
    $('#txtFirst').keyup(function(e) {
        var txtVal = $(this).val();
        $('#txtSecond').val(txtVal);
    });
});?

So when you remove text from txtFirst, it will also get removed from txtSecond but not the opposite. Because till now, no keyup event is attached with txtSecond. If you want to keep both of them sync, then repeat the above code for txtSecond as well.

$(document).ready(function() {
    $('#txtFirst').keyup(function(e) {
        var txtVal = $(this).val();
        $('#txtSecond').val(txtVal);
    });
    
    $('#txtSecond').keyup(function(e) {
        var txtVal = $(this).val();
        $('#txtFirst').val(txtVal);
    });
});?

See result below.

There is another way to do it. You can assign a cssClass to textboxes which you want to sync and then use below jQuery to achieve the above functionality.

$(document).ready(function() {
  $('.dummyClass').keyup(function(e) {
     var txtVal = $(this).val();
     $('.dummyClass').val(txtVal );
  }); 
});?

Feel free to contact me for any help related to jQuery, I will gladly help you.