CKEditor send Null Value to database via Ajax

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