CODEWITHSUNDEEP
javascriptjqueryappend
user1789437
user1789437

Reputation: 468

Append text to text area with jquery issue

Im trying to make some buttons append text to a textarea with jquery, and I have it working, but only if I dont type anything into the textarea itself.

Code:

<textarea name="comments" id="comments" rows="20" style="margin-left: 0px; margin-right: 0px; width: 968px;"></textarea>
<div>
  <button>+petname</button>
  <button>+lastvisit</button>
  <button>+nextvisit</button>
</div>
<script>
$( "button" ).click(function() {
  var text = $( this ).text();
  $('#comments').append(text); 
});
</script>

This code is working, but the minute I type something else into that text area, the buttons no longer work??? WHY!!?? I just cant figure it out. Much thanks. Jason

Upvotes: 2

Views: 8467

Answers (2)

PSL
PSL

Reputation: 123739

Instead of doing append set val using its function argument syntax, do this way:

$('#comments').val(function(_, val){
    return val + text; 
});

Demo

Upvotes: 7

zzlalani
zzlalani

Reputation: 24354

change 

$('#comments').append(text);

to 

$('#comments').val( $('#comments').val() + " " + text );

Upvotes: 3

Related Questions