Add multiple input values to textarea on keyup

Question

I wonder if someone could please help me. I have multiple inputs that need to insert into a textarea as you type. I've gotten that to work but when I start typing in a new input it resets the textarea with only that text from the input. I need it to continuously add from each input.

$(responseList).on("keyup", ".response-input", function(e) {
    $("textarea").text(e.target.value);
});

Any assistance would be greatly appreciated!

Carsten Løvbo Andersen · Accepted Answer · 2022-05-02 09:31:28Z

2

Not sure 100% about your setup and what you want to achivement in way of function but you could try something like this.

var t = $(".response-input").map(function() {
  return $(this).val();
}).get().join(" ")
$("textarea").text(t);

Demo

$(document).on("keyup", ".response-input", function(e) {
  var t = $(".response-input").map(function() {
    return $(this).val();
  }).get().join(" ")
  
  $("textarea").text(t);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="response-input" />
<input class="response-input" />
<input class="response-input" />
<textarea></textarea>

answered May 2, 2022 at 9:31

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kip · Accepted Answer · 2022-05-02 09:12:46Z

0

Use .append() for this. ✌️ https://api.jquery.com/append/

$(responseList).on("keyup", ".response-input", function(e) {
    $("textarea").append(e.target.value);
});

answered May 2, 2022 at 9:12

Kip

5134 silver badges14 bronze badges

1 Comment

cheesyMan Over a year ago

This way, what happens if I write some text inside input.response-input#1, then write something else in input.response-input#2, then go back to input.response-input#1 to correct something (maybe a typo or completely change it)?

Collectives™ on Stack Overflow

Add multiple input values to textarea on keyup

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related