CODEWITHSUNDEEP
javascriptjquery
user2015253
user2015253

Reputation: 1444

textarea.append() stops working after manually typing in it

I managed to narrow it down to a very small fiddle:

https://jsfiddle.net/wn7aLf3o/4/

Basically when you click on 'append' it should add an "X" to the textarea. That works great, until I decide to focus the textarea and type some stuff manually. Then I can't append X anymore.

Tested in Chrome and Firefox. What am I doing wrong?

HTML:

<div id="append">append</div>
<textarea id="text"></textarea>

JQuery:

$(function(){
    $(document).on('click', '#append', function(){
    $('#text').append(" X");
  });
});

Upvotes: 0

Views: 613

Answers (2)

Charu Maheshwari
Charu Maheshwari

Reputation: 1653

Updated fiddle at https://jsfiddle.net/wn7aLf3o/21/. You don't have to append an element in a textrarea. Append is used to add an HTML element, however you want to modify the text of textarea, so use Val().

$(function(){
    $(document).on('click', '#append', function(){
    $('#text').val( $('#text').val() + " X") ;
  });
});

Upvotes: -1

OliverRadini
OliverRadini

Reputation: 6476

You need to use val instead:

$(function(){
	$(document).on('click', '#append', function(){
  	$('#text').val($('#text').val() + " X");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="append">append</div>

<textarea id="text"></textarea>

Upvotes: 6

Related Questions