jQuery and TinyMCE: textarea value doesn't submit

I am using jQuery and TinyMCE to submit a form, but there is a problem in serialization in that the Textarea value doesn't post.

Here is the code:

<form id="myForm" method="post" action="post.php">
    <textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea>
</form>

language: lang-js

$('#myForm').submit(function() {
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(data) {
            $('#result').fadeIn('slow');
            $('#result').html(data);
            $('.loading').hide();
        }
    })
    return false;
});

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,separator,image,separator,justifyleft,justifycenter,justifyright,jformatselect,fontselect,fontsizeselect,justifyfull,bullist,numlist,undo,redo,styleprops,cite,link,unlink,media,advhr,code,preview",
    theme_advanced_buttons2 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resize_horizontal : false,
    theme_advanced_resizing : true,
    extended_valid_elements :"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
});

Can you explain to me what I should change, and why, in order to get the value in the text area posted?

Solution 1:

Before submitting the form, call tinyMCE.triggerSave();

Solution 2:

You can configure TinyMCE as follows to keep the values of hidden textareas in sync as changes are made via TinyMCE editors:

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
});

The textarea elements will be kept up to date automatically and you won't need any extra steps before serializing forms etc.

This has been tested on TinyMCE 4.0

Demo running at: http://jsfiddle.net/9euk9/49/

Update: The code above has been updated based on DOOManiac's comment

Solution 3:

From TinyMCE, jQuery and Ajax forms:

TinyMCE Form Submission

• When a textarea is replaced by TinyMCE, it's actually hidden and TinyMCE editor (an iframe) is displayed instead.

• However, it's this textarea's contents which is sent when the form is submitted. Consequently its contents has to be updated before the form submission.

• For a standard form submission , it's handled by TinyMCE . For an Ajax form submission, you have to do it manually, by calling (before the form is submitted):

  tinyMCE.triggerSave();

$('form').bind('form-pre-serialize', function(e) {
    tinyMCE.triggerSave();
});

Solution 4:

That's because it's not a textarea any longer. It's replaced with an iframe (and whatnot), and the serialize function only gets data from form fields.

Add a hidden field to the form:

<input type="hidden" id="question_html" name="question_html" />

Before posting the form, get the data from the editor and put in the hidden field:

$('#question_html').val(tinyMCE.get('question_text').getContent());

(The editor would of course take care of this itself if you posted the form normally, but as you are scraping the form and sending the data yourself without using the form, the onsubmit event on the form is never triggered.)

Solution 5:

When you run ajax on your form, you need to tell TinyMCE to update your textarea first:

// TinyMCE will now save the data into textarea
tinyMCE.triggerSave(); 
// now grap the data
var form_data = form.serialize();