Tinymce plugin not getting textarea value to upload in database - php

Question

I am trying to upload data in database.
I using tinymce plugin to textarea editor. When I submit my data, textarea value uploads empty text. Please find below the frontend and backend code.
Frontend Code:
<form id="upload" enctype="multipart/form-data" method="post">
<textarea class="tinymce" name="product_tip" id="product_tip" placeholder="" col="5"></textarea>
<input type="button" name="submit" value="Submit" class="upload-btn"/>
</form>
Backend Code:
<?php
$product_tip=$_POST["product_tip"];
if(empty($product_tip)) {
echo "<div class='alert alert-danger'>Please enter Product tips.</div>";
}
else{
$result=mysqli_query($conn, "INSERT INTO product(tip) VALUES ('$product_tip')")or die("Could not retrieve image: " .mysqli_error($conn));
echo 1;
}
?>
and this my connection code for frontend and backend file.
$(document).ready(function(){
$('.upload-btn').click(function(){
var formdata=new FormData($('#upload')[0]);
$.ajax({
url:'includes/backend_product_upload.php',
method: "POST",
async: false,
cache: false,
contentType: false,
processData: false,
data : formdata,
success:function(answer_from_actionpage){
if(answer_from_actionpage == 1){
$('.error').html("<div class='alert alert-success'>Successfully Product Upload</div>");
//$('.form-control').val("");
}else{
$('.error').html(answer_from_actionpage);
}
}
})
});
});

Answer 1

Add tinyMCE.triggerSave(); in connection file like this-
$('.upload-btn').click(function(){
tinyMCE.triggerSave();
var formdata=new FormData($('#upload')[0]);
$.ajax({
url:'includes/backend_product_upload.php',
method: "POST",
async: false,
cache: false,
contentType: false,
processData: false,
data : formdata,
success:function(answer_from_actionpage){
if(answer_from_actionpage == 1){
$('.error').html("<div class='alert alert-success'>Successfully Product Upload</div>");
//$('.form-control').val("");
}else{
$('.error').html(answer_from_actionpage);
}
}
})
});

Answer 2

By default, TinyMCE will automatically update the underlying <textarea> when the form is submitted via standard HTML form submission. This is built-in behavior in TinyMCE as the overhead of keeping the <textarea> constantly in sync is not needed for most applications.
If you are not relying on a standard HTML form submission event you have a couple of options...
When you start the AJAX form submission process:
TinyMCE has a triggerSave() method that forces the editor to sync with the <textarea> immediately.
https://www.tinymce.com/docs/api/tinymce/root_tinymce/#triggersave
You can call the triggerSave() first thing when your user wants to submit the form and then perform your validation.
TinyMCE Events:
As your response to your own question shows you can certainly rely on various editor events to sync the editor to the <textarea> via the triggerSave() method. There is no technical issue with this just know that you will likely trigger a large number of these events if you rely on something like the change event. If you have large/complex HTML content or many editors on one page constantly syncing with the underlying <textarea> may impact the browser's performance.
Which is better?
If you DON'T need real time validation of the content... just calling triggerSave() at the start of the AJAX submission process is probably easier (no TinyMCE configuration code tied to an event needed) and creates less overhead for the browser.
If you DO need real time validation of the content... using an event like the change event to sync the <textarea> is the better solution. It might look like this:
tinymce.init({
selector: "#myTextarea",
...
setup: function (editor) {
editor.on('change', function () {
tinymce.triggerSave();
});
}
});