Monday, August 20, 2018

CKEDITOR doesn't submit data via ajax on first submit

My forms are not sending data to the server on the first submit when using CKEDITOR. If I click it once, it sends empty fields without my input. However, if I submit it a second time, it sends the inputted data to the server. So you need to submit it twice for data to be passed to the server.

I have CKEDITOR bundled with the BBCODE plugin.

jQuery Ajax

$('form#ajax').on('submit', function(){

    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

    that.find('[name]').each(function(index, value){
        var that = $(this),
            name = that.attr('name'),
            value = that.val();

        data[name] = value;
    });

    console.log(data.message); // Outputs on second submit

    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response){

            //

        }
    });

    return false;
});

Form

{{ Form::open(array('action' => 'AppsController@sendApp', 'class' => 'app', 'id' => 'ajax')) }}

    
{{ Form::label('message', 'Application', array('style' => 'padding-top: 5px')) }} {{ Form::submit('Send Application', array('class' => 'btn btn-core btn-block submit', 'style' => 'margin-top: 5px')) }} {{ Form::close() }}

Sorry if the form syntax looks alien to you, it's Laravel Blade.

Recap

On first submit, the data sent to the server is empty. On the second submit, it is not.

Solved

try updating the CKEditor related fields, before performing Ajax Submit, like:

$('form#ajax').on('submit', function(){
    for ( instance in CKEDITOR.instances ) {
        CKEDITOR.instances[instance].updateElement();
    }
    //rest of your code

No comments:

Post a Comment