We can use jQuery to append text to a textarea field simply by getting the text from the textarea using the jQuery val() method and then adding our new text to this value.

var newText = "This is our text we want to append";
var userInput = $("textarea").val();
userInput = userInput + " " + newText;
$("textarea").val(userInput);

Let’s say we have the following HTML:

Say we wanted to add to the description field which has the text “About The Programming Expert:”. If we wanted to add the text, “This blog is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.” to our initial description, then we can do this by using the code we have provided above using the val() method.


var newText = "This blog is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.";
var userInput = $("desc").val();
userInput = userInput + newText;
$("desc").val(userInput);

This would result in the following:

If you are using WordPress, don’t forget to change the $ to jQuery as below:


var newText = "This blog is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.";
var userInput = jQuery("desc").val();
userInput = userInput + newText;
jQuery("desc").val(userInput);

This can also be done using plain JavaScript with the value property.

Example of Using jQuery to Append Text to a Textarea Field

In this example, we will have a form that will display the information of a user. We will then let the user ADD text to one of the fields by using a textarea field and submit button below it. We will also give the user the ability to clear text textarea as well.

Here is the HTML setup:

Clear bio
Update bio

In the jQuery code below, we will get the new user textarea value using the jQuery val() method, and then append that new text to the text in the textarea labeled Bio.

Here is the jQuery code for appending new text to a textarea:

$("#click-me").click(function(){
  //First get the existing textarea text 
  var oldText = $("#desc").val();
  
  //The add our next text to this text
  var userInput = $("#new-bio").val();
  var newText = oldText + " " + userInput;
  $("#desc").val(newText);
});

//Clear textarea text
$("#click-me1").click(function(){
  $("#desc").val("");
});

The final code and output for this example of using jQuery to append text to a textarea field is below:

Code Output:








Clear bio

Update bio

Full Code:

Clear bio
Update bio

Hopefully this article has been useful to help you understand how to use jQuery to append text to a textarea field.

Categorized in:

jQuery,

Last Update: February 26, 2024