Copy text of a field into another automatically

Question

I need to copy the text entered in a field (whether it was typed in, pasted or from browser auto-filler) and paste it in another field either at the same time or as soon as

Answer 1

You need to bind the first input to an event. Something like this would work:

$(document).ready(function(){
    $("#a").change(function(){
        var a = $("#a").val();
        $("#b").val(a);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="a" />
<input type="text" id="b" />

Answer 2

$(document).ready(function() {
 $('.textBox1').on('change', function() {
   $('.textBox2').val($(this).val());
 }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="textBox1"/>
<input type="text" class="textBox2"/>

Answer 3

If you want that the value of the second field is updated as the same time that the first one, you could handle this with a timeout.

Each time a key is pressed, it will execute the checkValue function on the next stack of the execution. So the value of the field1 in the DOM will already be updated when this function is called.

var $field1 = $("#field_1");
var $field2 = $("#field_2");

$field1.on("keydown",function(){
   setTimeout(checkValue,0); 
});

var v2 = $field2.val();
var checkValue = function(){
    var v1 = $field1.val();
    if (v1 != v2){
        $field2.val(v1);
        v2 = v1;
    }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="field_1" value=""/><br/>
<input id="field_2" value=""/>

Answer 4

Call onchange() method on the first element onblur

<input type="text" id="field_1" onblur="onchange()"/>

Answer 5

You are almost there... The function is correct, you just have to assign it to the change event of the input:

<script type="text/javascript">
    $(document).ready(function () {

        function onchange() {
            //Since you have JQuery, why aren't you using it?
            var box1 = $('#field_1');
            var box2 = $('#field_2');
            box2.val(box1.val());
        }
        $('#field_1').on('change', onchange);
    });

Answer 6

try with keyup event

 <input type="text" id="box_1"/>
<input type="text" id="box_2"/>
$('#box_1').keyup(function(){

$('#box_2').val($(this).val());

})