Content of ckeditor textarea is not sent through Ajax Jquery - php

Question

I have a form with inputs and a textarea (ckeditor), after submitting the form with ajax all input fields value are sent to database table except CKEDITOR textarea and I can't figure out why!
I've tried some solutions in some questions here with same problem but with no vein!
HTML PART
<form id="submitForm">
... some inputs ...
<textarea class="form-control" name="details" rows="6" id="product-details"></textarea>
<button class="btn btn-solid btn-rounded" id='publish' type="submit"> SAVE </button>
</form>
JS PART
$(document).ready(function() {
ClassicEditor.create( document.querySelector("#product-details"), {
toolbar: {
items: [
"heading", "|",
"alignment", "|",
"bold", "italic", "strikethrough", "underline", "subscript", "superscript", "|",
"link", "|",
"bulletedList", "numberedList", "todoList",
"-", // break point
"fontfamily", "fontsize", "fontColor", "fontBackgroundColor", "|",
"code", "codeBlock", "|",
"insertTable", "|",
"outdent", "indent", "|",
"uploadImage", "blockQuote", "|",
"undo", "redo"
],
shouldNotGroupWhenFull: false
}
});
$("#submitForm").on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'ajax/create-product.php',
data: new FormData(this),
dataType: 'json',
contentType: false,
cache: false,
processData: false,
beforeSend: function() {
$("#publish").prop("disabled", true);
},
success: function(response) {
if (response.status == '1') {
Command: toastr["success"](response.message, "")
window.location.href = response.url;
} else {
$("#publish").prop("disabled", false);
Command: toastr["error"](response.message, "")
}
}
});
});
});

Answer 1

It's not working because the value of the editor is not exposed directly to the textarea beneath. I think there is some option for that, but this will work as well: copy the value upon submit to an hidden control.
var instance;
$(document).ready(function() {
ClassicEditor.create(document.querySelector("#product-details")).then(editor => instance = editor);
$("#submitForm").on('submit', function(e) {
e.preventDefault();
document.querySelector("[name=details").value = instance.getData();
$.ajax({
type: 'POST',
url: 'ajax/create-product.php',
data: new FormData(this),
dataType: 'json',
contentType: false,
cache: false,
processData: false,
beforeSend: function() {
$("#publish").prop("disabled", true);
},
success: function(response) {
if (response.status == '1') {
Command: toastr["success"](response.message, "")
window.location.href = response.url;
}
else {
$("#publish").prop("disabled", false);
Command: toastr["error"](response.message, "")
}
}
});
});
});
textarea {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
<form id="submitForm">
<textarea class="form-control" name="details-editor" rows="6" id="product-details"></textarea>
<p>this textarea should be hidden:</p>
<textarea name="details"></textarea>
<button class="btn btn-solid btn-rounded" id='publish' type="submit"> SAVE </button>
</form>