John Mwaniki /   07 Jul 2023

[Solved]: Updating TinyMCE value with jQuery not working

You can easily update the values of HTML form input fields dynamically using jQuery. This is through the use of the val() method.

Example 1

$("#name").val("John Doe");

This updates an input field that has the ID "name" with the value "John Doe".

Example 1

Below are two input fields and a button. If you enter a value in the input field "Input 1" and click the button, this value will be dynamically also added in "Input 2".

The input 1 has the ID "input1" and input 2 "input2". The jQuery code below gets the value of input 1 using the ID as the selector and val() method and uses the same method to update the value of input 2 using its ID as its selector.

        var input1 = $("#input1").val();

You can as well update the value of a textarea using jQuery in the same method and its ID or class as the selector.

Updating form input fields using jQuery comes in handy, especially in information update forms, where the information to be updated is loaded dynamically from the server using Ajax.

However, though updating the values of form inputs (including textareas) work fine in jQuery, this doesn't work when the textarea has a TinyMCE WYSIWYG editor.

If you are trying to update the value of a textarea with the TinyMCE editor dynamically using jQuery, below is how to do it.

var newtext = "Sample text to update TinyMCE editor with";
var activeEditor = tinyMCE.get('#myTextarea');

In the example, "newtext" is the variable holding the text to update the TinyMCE editor while "myTextarea" is the ID of the TinyMCE editor textarea. Make sure to update them accordingly in your code.


Enter some text in the textarea field below and click on the button below it to update the TinyMCE editor with that content.

That's it!

Now you know how to dynamically update the value of a TinyMCE editor on a web page using jQuery.