CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
davidxd33
davidxd33

Reputation: 1206

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')) }}

    <div class="form-container">

        {{ Form::label('message', 'Application', array('style' => 'padding-top: 5px')) }}

            <textarea name="message" cols="50" rows="6" class="form-control" id="eitor" style="padding-top:5px;"></textarea>


    </div>

        {{ 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.

Upvotes: 12

Views: 15462

Answers (1)

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100205

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

Upvotes: 48

Related Questions