CODEWITHSUNDEEP
javascriptjqueryhtml
adrian.m123
adrian.m123

Reputation: 85

Copy text of a field into another automatically

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 the user changes to another field.

If the user deletes the text in field_1, it should also get automatically deleted in field_2.

I've tried this but it doesn't work:

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

function onchange() {
var box1 = document.getElementById('field_1');
var box2 = document.getElementById('field_2');
box2.value = box1.value;
}
});
</script>

Any ideas?

Upvotes: 4

Views: 36073

Answers (8)

Hacketo
Hacketo

Reputation: 4997

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

Upvotes: 0

Kirill Rogovoy
Kirill Rogovoy

Reputation: 591

If you are using jQuery, it is very easy - you need just register the right function on the right event :)

Here's the code:

<input id="foo" />
<input id="bar" />

$(function(){
    var $foo = $('#foo');
    var $bar = $('#bar');
    function onChange() {
        $bar.val($foo.val());
    };
    $('#foo')
        .change(onChange)
        .keyup(onChange);
});

JSFiddle: http://jsfiddle.net/6khr8e2b/

Upvotes: 3

indubitablee
indubitablee

Reputation: 8206

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

Upvotes: 3

wahwahwah
wahwahwah

Reputation: 3177

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

Upvotes: 0

DanielPanic
DanielPanic

Reputation: 192

Try something like:

$(document).ready(function () {
    $('#field_1').on('change', function (e) {
       $('#field_2').val($('#field_1').val());
    });
});

Heres a fiddle: http://jsfiddle.net/otwk92gp/

Upvotes: 0

napster3world
napster3world

Reputation: 366

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

})

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16841

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

Upvotes: 10

Ramesh Kotha
Ramesh Kotha

Reputation: 8322

Call onchange() method on the first element onblur

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

Upvotes: 0

Related Questions