Content of ckeditor textarea is not sent through Ajax Jquery

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

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>