Get CKeditor Value Using FormData Object

Question

below is my html form

<form id='add'>
<input type="text" name="title">
<textarea id="usingckeditor" name="content"></textarea>
<input type="file" name="file">
<button id="save">save</button>
</form>

and here is my javascript

$("#save").on('submit',(function(e) {
 $.ajax({
    url: "blog/saveblog.php",
    type: "POST",
    data:  new FormData(this),
    contentType: false,
    cache: false,
    processData:false,
    success: function(data){

    }
});
})

i'm using new FormData() to send data to saveblog.php, and saveblog.php working to upload image and get value of $_POST['title'], but $_POST['content'] is empty

how FormData to get content of textarea(that using ckeditor)?

Answer 1

Buttons don't have submit events, you have to bind the submit event to the form, also you have to prevent the form from submitting since you're using ajax to post the data.
CKEditor manages its own content so it's not in the textarea, you can get it by calling getData() on the CKEditor instance

<form id='add'>
  <input type="text" name="title">
  <textarea id="usingckeditor"></textarea>
  <!-- remove name attribute so it will not pollute form data object -->
  <input type="file" name="file">
  <button id="save">save</button>
</form>

$("#add").on('submit',(function(e) {// attach form to submit event
  e.preventDefault(); //prevent the form from submitting
  var data = new FormData(this);
  //add the content
  data.append('content', CKEDITOR.instances['usingckeditor'].getData());
  $.ajax({
    url: "blog/saveblog.php",
    type: "POST",
    data:  data,
    contentType: false,
    cache: false,
    processData:false,
    success: function(data){

    }
  });
})