CKEditor send Null Value to database via Ajax - php

Question

I'm trying to create the Event's Calendar using PHP, Ajax and CKEditor 4. When I send the value to database via Ajax, it send the null value.
It send every values(title, start date, end date) except: c_details that I use CKEditor 4
Database's picture
My form's picture
Here's my form:
<div class="modal-body">
<form id="new_calendar">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" placeholder="">
</div>
<div class="form-group">
<label>Description</label>
<textarea type="text" class="form-control" id="editor" name="c_details" placeholder=""></textarea>
</div>
<div class="form-group">
<label>Start Date</label>
<input type="text" class="form-control" name="start" placeholder="YYYY-mm-dd">
</div>
<div class="form-group">
<label>End Date</label>
<input type="text" class="form-control" name="end" placeholder="YYYY-mm-dd">
</div>
<input type="hidden" name="new_calendar_form">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="return new_calendar();">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
Here's Ajax:
function new_calendar() {
for (instance in CKEDITOR.instances) {CKEDITOR.instances[instance].updateElement()}
$.ajax({
type: "POST",
url: "json-event.php",
data: $("#new_calendar").serialize(),
success: function (data) {
$(".close").trigger('click');
alert(data);
location.reload();
}
});
return false;}
Here's all my code on Code Sandbox, I just changed the name='description' to name='c_details'
: https://codesandbox.io/s/blissful-water-nop1y?file=/index.php
Save new data:
public function new_calendar($data)
{
$db = $this->connect();
$add_user = $db->prepare("INSERT INTO calendar (id,title,c_details,start,end) VALUES(NULL,?,?,?,?) ");
$add_user->bind_param("ssss", $data['title'], $data['c_details'], $data['start'], $data['end']);
if (!$add_user->execute()) {
echo $db->error;
} else {
echo "Saved !";
}
}

Answer 1

before send data to ajax request put this:
for (instance in CKEDITOR.instances) {CKEDITOR.instances[instance].updateElement()}
This will update the element textarea with information of ckeditor