11

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.

TRiG
  • 10,148
  • 7
  • 57
  • 107
davidxd33
  • 1,186
  • 4
  • 22
  • 38
  • have you tried debugging the code using the browser's inspector? ctrl+shift+i con google chrome, go to Sources tab, press ctrl+o and open the file with your javascript, now put some breakpoints and inspect the values, you sould find the error there – arieljuod Jun 25 '14 at 00:16
  • Could you provide a link? I suspect this may have something to do with the form tag or action on the form. – olingern Jun 25 '14 at 00:19
  • @arieljuod I've already debugged the code, it doesn't show an error. An SO question is my last resort. – davidxd33 Jun 25 '14 at 00:40
  • @LindyHop It has nothing to do with the action. I completely disabled the AJAX call and simply console logged the value of message and it returned empty first, then filled second. – davidxd33 Jun 25 '14 at 00:42
  • This question (and answer) is similar to this one that was asked 3 years prior. http://stackoverflow.com/questions/3256510/how-to-ajax-submit-a-form-textarea-input-from-ckeditor – James Moberg Jun 09 '15 at 18:10

1 Answers1

46

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
Sudhir Bastakoti
  • 99,167
  • 15
  • 158
  • 162
  • 1
    I totally forgot to come back to give you more rep. This worked :) – davidxd33 Jul 16 '14 at 22:49
  • perfect thank you! =) took me a while to realize that the ajax submit stopped working because I just changed the plain textarea field to CKEditor..you saved me a lot of time :) – Can Rau Jul 17 '15 at 06:18
  • I had the same issue, and tried to use your solution in the `beforeSend` callback of the `$.ajax(` method but it didn't work (perhaps I just messed something up). Then I tried it as you suggest and it worked. – Quiquetas Dec 10 '15 at 18:21
  • thank you, this really helped, I was wondering if you could explain why such kind of behavior happens? – Yash Karanke Dec 24 '19 at 04:48