JQuery - Duplicate Field Input Text In Real Time

Question

I\'m trying to figure out how to copy a users text input in one form field to another. Specifically, when someone fills in their email address in the contact form, it will b

Answer 1

You said you want it in real time. I assume that means while the user is typing, the value should be replicated for each keystroke.

If that's right, try this:

var mail = document.getElementById("mail");

$("#email").keyup(function() {
    mail.value = this.value;
});

Or if you want more jQuery:

var $mail = $("#mail");

$("#email").keyup(function() {
    $mail.val( this.value );
});

This will update for each keyup event.

I'd probably add a redundant blur event in case there's an autocomplete in the field.

$("#email").blur(function() {
    $mail.val( this.value );
});

Answer 2

Since all your fields have unique ids, this is quite straight forward:

$(function() {                                       // <== Doc Ready
    $("#email").change(function() {                  // When the email is changed
        $('#mail').val(this.value);                  // copy it over to the mail
    });
});

Try it out with this jsFiddle

.change()
.val()

Answer 3

Is $("#mail") another input box ? It doesn't appear in your HTML (Edit: well it does now, but didn't at first :)

$("#mail").val($("#email").val()) should do what you want.

Answer 4

you can simply do this

$('#mail').text($('#email').val())

Answer 5

use keyup and change both.

$("#boxx").on('keypress change', function(event) {
       var data=$(this).val();
       $("div").text(data);
});

here is the example http://jsfiddle.net/6HmxM/785/