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="ments" id="ments" 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();
  $('#ments').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

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="ments" id="ments" 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();
  $('#ments').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

• javascript
• jquery
• append

2 Answers 2

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

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

Demo

change

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

to

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