Getting the value of an input textbox and adding it to a textarea

Question

I am a beginner at jQuery, and am wondering if this is possible to do. I have a form that has a name input textbox. I want to grab what the user types into that textbox and add it to the first sentence in my textarea. So that text area would say Dear (whatever the user typed). Any push in the right direction would be appreciated.

<form>
<label>First Name:</label>
<input type="text" class="fName" />
<br /><br />
<label>Last Name:</label>
<input type="text" class="lName">
<br /><br />
<textarea>Dear +firstname+</textarea>
</form>

My form is fairly simple. I haven't tried anything yet, but you are so helping me go in the right direction. Thanks.

Answer 1

Try this:

$('input').keyup(function() {
    $('textarea').text($(this).val());
});

Answer 2

You can try something like this:

<script>

    $(function() {

        $( "#name" ).change(function() {
            $("#textAreaId").append($( "#name" ).val());  
        });

     });

</script>    

Hope it helps to you!

Answer 3

Assuming the input has an ID of name and the textarea has an ID of area then:

$("#name").on("input", function(){
  var name = $(this).val();
  var msg = "Your message here";
  var content = "Dear "+name+", \n" + msg;
  $("#area").text(content);
});

I would strongly advise against using change¹ or keyup² as input³ is a much more comprehensive check of whether the user has changed anything.

Here is a JSFiddle example

---

Footnotes:

1. change only responds on blur (i.e. the user presses tab or clicks outside the input).
2. keyup only works on key presses, so it doesn't register when the user has pasted using their mouse, for instance.
3. input registers any change to an input.

---

Update

As per my discussion with @GeorgeMauer, here is the recommended approach:

$("input.full-name").on("input", function(){
  var full_name = $(this).val();
  var form = $(this).closest("form");
  var message = form.find(":input.message");
  var content = message.val();
  var lines = content.split("\n");
  lines[0] = "Dear " + full_name + ",";
  var new_message = lines.join("\n");
  message.val(new_message);
});

Please see the updated JSFiddle example.

This has the added benefit of re-using the form without adding any extra JavaScript. And it also works a lot better (e.g. you can edit both inputs freely).

Answer 4

Edit: For your situation, it doesn't look like you are setting up your form correctly. Forms are meant for submitting a group of information, then putting this information somewhere else - where it needs to go. Hence, I moved your textarea outside of the form.

I would recommend setting up your HTML like so:

<form id="target" action>
    <label>First Name:</label>
    <input type="text" id="fName" />
    <br /><br />
    <label>Last Name:</label>
    <input type="text" id="lName" /><br><br>
    <input type="submit" value="Submit"/>
    <br /><br />
</form>
<textarea id="message"></textarea>

And here is the jQuery I used:

$('form#target').submit(function(e) {
    e.preventDefault();
    var message, firstName, lastName;

    message = "Dear ";
    firstName = $('input#fName').val();
    lastName = $('input#lName').val();

    message += firstName + ' ';
    message += lastName + ',';
    $('textarea#message').text(message);
});

Note: I changed your class properties to id because id's are meant for unique tags. If you had multiple items that you wanted to grab all at once with jQuery, classes would be the way to go.

Preview Here.

Hopefully this helps!

Answer 5

So this is a deceptively difficult question because you are trying to update PART OF the text inside a textarea. There is no structure inside of a textarea, it is just "text". So what what you're asking is similar to having a bucket of ping pong balls, writing a name on one of them, mixing up the bucket, then telling someone that they have to continuously replace the named ball with a new one.

While there are ways of doing this, it raises a bunch of questions that I doubt you want to answer - what if they delete the first line? What if they change their name directly in the textarea? What if they write their name multiple times in the text area? What if their browser uses a language that writes top-down?

Unless you are prepared to answer these queries (and if you are you should probably start a more specific question) I recommend changing your approach. For example, I doubt you want them to have the ability to change the first line. So instead you can structure your form as follows:

<form>
  <label>First Name: <input class="first-name" /></label>
  <label>Last Name: <input class="last-name" /></label>
  <aside class="salutations">Dear <span class="first-name-salutation"></span></aside>
  <textarea class="message"></textarea>
</form>

Notice I moved your inputs into the labels (this is the technically correct way of doing it without using ids), removed the <br> tags (you should use css for this) and moved the salutation into non user-editable text. Then your javascript can be simply

$(function(){
  $('input.first-name').on('input', function(){
    $('.first-name-salutation').text($(this).text());
  });
})

And then prepend "Dear "+firstName line to the message on the server.

As an aside I'll point out that it's not 2009 anymore and there's little reason to use jquery directly for things like this when there are excellent frameworks that don't force you to do so many things manually like Knockout and Angular.

Answer 6

Please are you conversant with AJAX? If yes thatis the best approach to use.