How to Copy Value from one Input Field to Another

Question

I have two input fields:

<input type="text" id="one" name="one" />
<input type="text" id="two" name="two" />

I want to make it so that whatever that's typed into id one will automatically be put into id two.

Any ideas on how to do this? Possibly javascript needed?

Answer 1

Simply register an input even handler with the source textfield and copy the value to the target textfield.

window.onload = function() {
    var src = document.getElementById("one"),
        dst = document.getElementById("two");
    src.addEventListener('input', function() {
        dst.value = src.value;
    });
};

// jQuery implementation

$(function () {
    var $src = $('#three'),
        $dst = $('#four');
    $src.on('input', function () {
        $dst.val($src.val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>

<strong> With vanilla JavaScript</strong>
<br />
<input type="text" id="one" name="one" />
<input type="text" id="two" name="two" />

<br />
<br />

<strong>With jQuery</strong>
<br />
<input type="text" id="three" name="three" />
<input type="text" id="four" name="four" />

Fiddle