How to ajax-submit a form textarea input from CKEditor?

Question

I am using CKEditor, jQuery and jQuery form plugin and I would like to submit contents of the CkEditor form via an Ajax query. Here is my code:

<form id="article-form" name="article-form" method="post" action="/myproject/save">
  <textarea name="bodyText" style="visibility: hidden; display: none;"></textarea>
  <script type="text/javascript">
    CKEDITOR.replace('bodyText');
  </script>

  <a onClick="$("#article-form").ajaxSubmit();">Submit</a>

</form>

Unfortunately, it seems that the Ajax request does not pass the bodyText parameter;

What did I do wrong or how can I achieve what I need?

Thank you.

by itself it is not needed to hide the textarea, CKEDITOR will take care of that. In case CKEDITOR is not loading, than the user still gets an input field. — Lexib0y, Jan 06 '14 at 18:26

Gabriele Petrioli · Accepted Answer · 2015-11-22T12:45:07.127

144

you need to first call the following, to make the CKEDITORs update their related fields..

for ( instance in CKEDITOR.instances )
    CKEDITOR.instances[instance].updateElement();

so

HTML

<a onClick="CKupdate();$('#article-form').ajaxSubmit();">Submit</a>

and javascript

function CKupdate(){
    for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
}

edited Nov 22 '15 at 12:45

answered Jul 15 '10 at 14:31

Gabriele Petrioli

191,379
34
261
317

Thank you. Where do I need to place this call : before CKEDITOR.replace or before ajaxSubmit() ? – fabien7474 Jul 15 '10 at 14:34
Ok. It works when placed before ajaxSubmit(). Thank you very much – fabien7474 Jul 15 '10 at 14:36
@fabien, i believe your `CKEDITOR.replace` should have as parameter the name of the `textarea` and not the ID of the `form` .. so it should be `CKEDITOR.replace('bodyText')` – Gabriele Petrioli Jul 15 '10 at 14:37
after loading editor by replace, you may add this line >>> CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances.textAreaClientId.updateElement();}); – Mhmd Jul 13 '13 at 12:13

score 18 · Answer 2 · edited Sep 13 '12 at 09:46

18

This works for me best: beforeSerialize callback

$('form#description').ajaxForm({
    beforeSerialize:function($Form, options){
        /* Before serialize */
        for ( instance in CKEDITOR.instances ) {
            CKEDITOR.instances[instance].updateElement();
        }
        return true; 
    },
    // other options
});

edited Sep 13 '12 at 09:46

Besnik

6,469
1
31
33

answered Feb 10 '12 at 09:11

Pepa Chmel

351
2
8

This is correct. You need to do it beforeSerialize because otherwise the data you are updating using updateElement() isn't going to be updated until the next time you try to serialize the data. – stormlifter Jul 09 '12 at 15:35
Thanks a lot!! Only this works for me and i agree with #stormlifter – Besnik Sep 13 '12 at 09:54

score 8 · Answer 3 · edited Sep 13 '12 at 09:47

8

If you use the jQuery form plugin, you can use the beforeSubmit option for a more elegant solution:

$("#form").ajaxForm({
    beforeSubmit:  function()
{
        /* Before submit */
    for ( instance in CKEDITOR.instances )
    {
        CKEDITOR.instances[instance].updateElement();
    }
},

  // ... other options
});

edited Sep 13 '12 at 09:47

Besnik

6,469
1
31
33

answered Aug 01 '11 at 12:58

Crewone

91
1
3

Milan Saha · Answer 4 · 2015-05-09T00:52:17.447

6

In my case the following helped me,i just use these two lines before seializing the form.

  for ( instance in CKEDITOR.instances )
       CKEDITOR.instances[instance].updateElement();

  var data = $('#myForm').serializeArray();

edited May 09 '15 at 00:52

answered Jul 12 '12 at 10:08

Milan Saha

905
11
12

score 4 · Answer 5 · answered Dec 03 '12 at 10:55

I tried something like this:

First I had to put an id = "#myForm" on @Html.BeginForm afterwards, I put these in my scripts part where in I use the script:

<script type="text/javascript">
    $(document).ready(function CKupdate() {
        $('#myForm').ajaxForm(function () {
            for (instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }
        });       
    });
</script>

and then I did something like this =] for my submit button and it works fine for me, no more pressing the Submit twice =]

<button type="submit" id="submitButton" onclick="CKupdate();$('#myForm').ajaxSubmit();">Submit</button>

score 1 · Answer 6 · answered Apr 22 '11 at 07:28

I just did it like this:

$('#MyTextArea').closest('form').submit(CKupdate);

        function CKupdate() {
            for (instance in CKEDITOR.instances)
                CKEDITOR.instances[instance].updateElement();
            return true;
        }

How to ajax-submit a form textarea input from CKEditor?

6 Answers6

Linked