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

JavascriptJqueryCkeditorFormsJquery Forms-Plugin

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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();
}

Solution 2 - Javascript

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

Solution 3 - Javascript

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

Solution 4 - Javascript

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();

Solution 5 - Javascript

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>

Solution 6 - Javascript

I just did it like this:

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

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionfabien7474View Question on Stackoverflow
Solution 1 - JavascriptGabriele PetrioliView Answer on Stackoverflow
Solution 2 - JavascriptPepa ChmelView Answer on Stackoverflow
Solution 3 - JavascriptCrewoneView Answer on Stackoverflow
Solution 4 - JavascriptMilan SahaView Answer on Stackoverflow
Solution 5 - JavascriptEugeneEuniceView Answer on Stackoverflow
Solution 6 - JavascriptOmuView Answer on Stackoverflow