Using jQuery to Append Text to textarea Field

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:

<form>
  <label for="desc">Description:</label>
  <textarea type="text" id="desc" name="desc">About The Programming Expert: </textarea>
  <button type="submit" value="Submit">Submit</button>
</form>

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:

<form>
  <label for="desc">Description:</label>
  <textarea type="text" id="desc" name="desc">About The Programming Expert: This blog is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.</textarea>
  <button type="submit" value="Submit">Submit</button>
</form>

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:

<form id="form-1">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" value="theprogrammingexpert" disabled>
  <label for="pass">Password:</label>
  <input type="password" id="pass" name="password" value="password" disabled>
  <label for="desc">Bio:</label>
  <textarea type="text" id="desc" name="desc" disabled>About The Programming Expert - This blog is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.</textarea>
</form>
<div id="div1">
  <label for="newbio">Add to bio:</label>
  <textarea type="text" id="new-bio" name="newbio"></textarea>
  <div id="click-me1" class="click-me">Clear bio</div>
  <div id="click-me">Update bio</div>
</div>

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:

Full Code:

<form id="form-1">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" value="theprogrammingexpert" disabled>
  <label for="pass">Password:</label>
  <input type="password" id="pass" name="password" value="password" disabled>
  <label for="desc">Bio:</label>
  <textarea type="text" id="desc" name="desc" disabled>About The Programming Expert - This blog is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.</textarea>
</form>
<div id="div1">
  <label for="newbio">Add to bio:</label>
  <textarea type="text" id="new-bio" name="newbio"></textarea>
  <div id="click-me1" class="click-me">Clear bio</div>
  <div id="click-me">Update bio</div>
</div>

<script>

$("#click-me").click(function(){
  var oldText = $("#desc").val();
  var userInput = $("#new-bio").val();
  var newText = oldText + " " + userInput;
  $("#desc").val(newText);
});

$("#click-me1").click(function(){
  $("#desc").val("");
});

</script>

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