set value to a input and grab it on change or keyup

Question

Check the html code bellow. The id foo input taking a text then cloning to another input id doo . As you can see in jquery code i am simply passing the value from foo to doo. But my problem is when i try to get value of doo on second part of code in jquery i dont get updated value of doo . Thing is that if i write input in foo then it virtually displays in doo but in real this not changing i think. So what i want is- when i pass input in foo it will also trigger in doo value. Since i am also updating doo from foo . Ask question if you want to know anything more. Thanks in advance

jsfiddle link

Jquery:

$("#foo").keyup(function () {
         $('#doo').val($(this).val());

        });



$("#doo").on("change paste keyup", function () {
            var tryGetNewValue = $('#doo').val();
            console.log(tryGetNewValue);
        }); 

Html:

<input type="text" id="foo" value=""><br>
<br>
<input type="text" id="doo" value=""><br>

Answer 1

The problem is that the functions are running at the same time and the value of doo hasn't changed in time for the function. I would change your js code to this:

$("#foo").keyup(function () {
     $('#doo').val($(this).val());
 var tryGetNewValue = $('#doo').val();
        console.log(tryGetNewValue);
    });



$("#doo").on("paste keyup", function () {
        var tryGetNewValue = $('#doo').val();
        console.log(tryGetNewValue);
    }); 

And then obviously run whatever you would run in both places where you have the var tryGetNewValue running

Answer 2

The change event does not get triggered because only input directly from the user into the element can set it off (see https://developer.mozilla.org/en-US/docs/Web/Events/change ).

As for a way to allow this to work, you can use a function for each event like so:

$("#foo").keyup(function () {
   $('#doo').val($(this).val());
   changeEvent();
});

$("#doo").on("change paste keyup", function () {
   changeEvent()
}); 

function changeEvent(){
   var tryGetNewValue = $('#doo').val();
   console.log(tryGetNewValue);
}

Answer 3

It's better use deligate function of jquery. Both function change both input values.

 $(document).on("input paste keyup","#doo,#foo", function (e) {
     $("#foo").val($(this).val());
     $("#doo").val($(this).val());
     var tryGetNewValue = $(this).val();
     console.log(tryGetNewValue);
 }); 

You can even get same thing like below to

$( "body" ).delegate( "#doo, $foo", "input paste keyup", function(e) {
  $("#foo").val($(this).val());
  $("#doo").val($(this).val());
  var tryGetNewValue = $(this).val();
  console.log(tryGetNewValue);
});