JQuery - Дублирующий текст ввода поля в реальном времени

Я пытаюсь понять, как скопировать ввод текста пользователя в одном поле формы в другое. В частности, когда кто-то заполняет свой адрес электронной почты в контактной форме, он будет дублироваться в форме списка рассылки.

Обе эти формы используют ajax, поэтому нет беспокойства о том, что входной текст теряется при отправке.

Это код, который у меня есть:

    <div id="contact_form">
          <form name="contact" method="post" action="">

            <input type="text" name="name" id="name" size="30" value="Name" class="text-input" />
            <label class="error" for="name" id="name_error">Please enter your name.</label>
            <br />

            <input type="text" name="email" id="email" size="30" value="Email" class="text-input" />
            <label class="error" for="email" id="email_error">I need your email.</label>
            <br />

            <textarea rows="10" cols="30" type="textarea" name="message" id="message" value="Message" class="text-input" ></textarea>
            <label class="error" for="message" id="message_error">A message is required.</label>

            <br />
            <input type="submit" name="submit" class="button" id="submit" value="Send" />

          </form>
</div>

<div id="details">
    <p>some details here, not sure what yet</p>
    </div>

<div id="mail_list">
    <input type="text" id="mail" value="Your email" name="mail_list" /><input type="submit" name="submit" class="button" id="submit" value="Send" />
    </div>

Я нашел это в документации JQuery, но не смог заставить его работать:

$("#email").optionCopyTo("#mail");

Спасибо!

Ответы

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

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

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

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

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

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

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

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