CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Arif Nur Rohman
Arif Nur Rohman

Reputation: 195

Get CKeditor Value Using FormData Object

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)?

Upvotes: 3

Views: 6131

Answers (3)

Arghadeeph Halder
Arghadeeph Halder

Reputation: 37

Add this before ajax call:

var data = new FormData([form]);
data.append('[textarea_name]', CKEDITOR.instances['textarea_id'].getData());

Upvotes: 1

Антон Стрижов
Антон Стрижов

Reputation: 1

You might use:

$(form).trigger('form-pre-serialize');

And then create new FormData()

Upvotes: 0

Musa
Musa

Reputation: 97672

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){

    }
  });
})

Upvotes: 4

Related Questions