11

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 be duplicated in the mailing list form.

Both these forms are using ajax so there's no concerns about the input text being lost on submit.

This is the code I have:

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

I found this in the Jquery documentation, but couldn't get it to work:

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

Thanks!

Improve this question
6
  • 1
    you can simply do this $('#mail').val($('#email')) Commented Oct 31, 2010 at 1:46
  • Please provide a link to the .optionCopyTo() jQuery method. I cannot find it in [ the jQuery documentation. ](docs.jquery.com/Main_Page) ---- Oh, you must be refering to this plugin - plugins.jquery.com/project/Option - it is not part of the jQuery core, and it has to be added separately. Commented Oct 31, 2010 at 1:51
  • Hello, yes that's the page I was referring to. Thanks for all your answer, I'm having a little trouble getting any of them to work though. Any chance you could take a look? jsfiddle.net/DJdfZ/2 Commented Oct 31, 2010 at 2:05
  • Working example here for anyone who needs it: jsfiddle.net/DJdfZ/3 Commented Oct 31, 2010 at 2:13
  • 1
    @logic-unit, You are trying to assign a value to a function at ` $('#mail').val() = this.value;. jQuery's [.val()](http://api.jquery.com/val/) is a setter and a getter function, meaning you can pass the desired value as the first argument to it. Try $('#mail').val($('#email').val())`. (Also I think you don't need to wrap the whole thing in $(), since jsFiddle already does: jsfiddle.net/clarkf/3bqLK/1) Commented Oct 31, 2010 at 2:19

5 Answers 5

Reset to default
36

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 );
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

18

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

Improve this answer

2 Comments

Ah yeah, that's almost it, but I'd like the text to appear as they type it, hence my dramatic use of the term 'real time'. A bit like the matrix effects but with a text input (joke).
the title notes: Duplicate Field Input Text In Real Time - this is not it, sorry
0

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.

Improve this answer

1 Comment

Yeah I did a sneaky edit there, when I saw the mess I'd made of pasting my code in... :-/
0

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/

Improve this answer

2 Comments

I using this type of code. But it is good for single id. Need to create optimize function. That work for every field.
@ChaitanyaDesai you can do that by using a class or direct tag name. here is the example jsfiddle.net/6HmxM/1209
-1

you can simply do this 

$('#mail').text($('#email').val())
Improve this answer

1 Comment

sorry you can do .val on target and again .val on source too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.