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

I don't see anything here which shows how you actually submit the data. That's probably the most important part. — ADyson, Jan 05 '18 at 10:31
"Whenever I tried Inserting to database with php other values get inserted except my textarea". This doesn't imply the values aren't being posted though. Have you checked your browser's network tab to monitor the request and see whether a value called "content" is submitted in the request body, along with the other parameters? If so, then the problem is somewhere in your PHP code (I would guess maybe you aren't looking for the correct variable or something) and we would need to see that. — ADyson, Jan 05 '18 at 10:45
You see ADyson whenever I use normal html textarea, everything works fine but whenever I use Ckeditor $_POST['content'] returns an empty value — Ojo Joseph Oluwaseun, Jan 05 '18 at 10:52
does it submit the value if you remove ajax and just do a standard postback? — ADyson, Jan 05 '18 at 10:55
yeah it does, and still submit when i use ajax and normal textarea, the problem is when using ajax with ckeditor, its get posted but returns a empty value. I hope you understand me — Ojo Joseph Oluwaseun, Jan 05 '18 at 11:00

score 1 · Answer 1 · answered Jan 05 '18 at 11:10

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.

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

1 Answers1