Why does Ckeditor value returns empty when I disabled standard browser submit with javascript?

Question

I have a textarea field that uses ckeditor but I'm trying to submit the form via ajax and prevent the standard browser submit but ckeditor is returning an empty field. And I've really searched the internet but nothing seems to be working.

My Html and Javscript code are listed below Thanks in Advance.

Html

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<form action="processors.php" method="post" enctype="multipart/form-data" 
id="MyUploadForm">
<input type="text" placeholder="Title" name="title">
<input type="file" name="file">
<textarea name="content" id="editor"></textarea>
<button id="submit-btn" class="btn btn-default" type="submit">Submit All</button>
</form>

Javascript

for(var instanceName in CKEDITOR.instances){
CKEDITOR.instances[instanceName].updateElement();
} //To allow ajax in ckeditor

     $('#MyUploadForm').submit(function() {
        $(this).ajaxSubmit(options);
        // always return false to prevent standard browser submit and page navigation
        return false;
    });

var options = {
        target:   '#output',   // target element(s) to be updated with server response
        beforeSubmit:  beforeSubmit,  // pre-submit callback
        success:       afterSuccess,  // post-submit callback
        uploadProgress: OnProgress, //upload progress callback
        resetForm: true        // reset the form after successful submit
    };

    //progress bar function
    function OnProgress(event, position, total, percentComplete)
    {
    //Progress bar
    $('#progressbox').show();
    $('#progressbar1').width(percentComplete + '%') //update progressbar percent complete
    $('#statustxt').html(percentComplete + '%'); //update status text
    if(percentComplete>50)
    {
        $('#statustxt').css('color','#000'); //change status text to white after 50%
    }
 }

//function to format bites bit.ly/19yoIPO
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Bytes';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}

//function to check file size before uploading.
function beforeSubmit(){
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{
    var fsize = $('#FileInput')[0].files[0].size; //get file size
    var ftype = $('#FileInput')[0].files[0].type; // get file type
    //allow file types
    switch(ftype)
    {
  case 'image/png':
        case 'image/gif':
        case 'image/jpeg':
        case 'image/pjpeg':
        case 'text/plain':
        case 'text/html':
        case 'application/x-zip-compressed':
        case 'application/pdf':
        case 'application/msword':
        case 'application/vnd.ms-excel':
        case 'video/mp4':
            break;
        default:

            $("#output").html("<b>"+ftype+"</b> Unsupported file type!");
            return false
    }

    //Allowed file size is less than 5 MB (1048576)
    if(fsize>5242880)
    {
        $("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big file! <br 
    />File is too big, it should be less than 5 MB.");
        return false
    }

    $('#submit-btn').hide(); //hide submit button
    $('#loading-img').show(); //hide submit button
    $("#output").html("");
    }
    else
    {
    //Output error to older unsupported browsers that doesn't support HTML5 
    File API
    $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");
    return false;
}
}

Whenever I tried Inserting to database with php other values get inserted except my textarea

Answer 1

I think you have to move

for(var instanceName in CKEDITOR.instances){
  CKEDITOR.instances[instanceName].updateElement();
}

within your "submit" handler. Otherwise that code is running only when the page loads. This is no good because then the textarea only contains whatever the editor contained when the page was loaded (which, in your case, appears to be nothing).

Instead it needs to run at the time when the form is submitted, so that the latest content from the editor plugin is copied into the textarea.

 $('#MyUploadForm').submit(function(event) {
    event.preventDefault(); //this is instead of return false, but they are pretty much interchangeable. I think this is just a bit clearer.

    for(var instanceName in CKEDITOR.instances){
      CKEDITOR.instances[instanceName].updateElement();
    }

    $(this).ajaxSubmit(options);
});

Credit to this answer: How to ajax-submit a form textarea input from CKEditor? for the hint.