jQuery and TinyMCE textarea value doesn t submit

Question

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    lt form id  myForm  method  post  action  post php  gt       lt textarea name  question text  id  question text  style  width 543px height 250px   gt  lt  textarea gt   lt  form gt    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

User · Answer

I used   var save and add   function        tinyMCE triggerSave            new multi text block item   submit         This is all you need to do

User · Answer

I had this problem for a while and triggerSave   didn t work  nor did any of the other methods    So I found a way that worked for me   I m adding this here because other people may have already tried triggerSave and etc        tinyMCE init      selector    tinymce      This is my  lt textarea gt  class    setup   function ed                      ed on  change   function e                            This will print out all your content in the tinyMce box                      console log  the content   ed getContent                             Your text from the tinyMce box will now be passed to your  text area                               tinymce   text ed getContent                                                 Your other tinyMce settings           When you re submitting your form or whatever all you have to do is grab the data from your selector   In my case   tinymce   using     tinymce   text

User · Answer

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

User · Answer

I just hide   the tinymce and submit form  the changed value of textarea missing  So I added this      textarea id  id answer     change function        var editor id     this  attr  id        var editor   tinymce get editor id       editor setContent   this  val    save          It works for me

User · Answer

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

User · Answer

var text   tinyMCE activeEditor getContent        textareaid   remove        lt textarea id  textareaid  name  textareaid  gt   text   lt  textarea gt    insertAfter     name someinput

User · Answer

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

User · Answer

Before submitting the form  call tinyMCE triggerSave

User · Answer

You can also simply use the jQuery plugin and package for TinyMCE it sorts out these kinds of issues

User · Answer

eldar  I had the same issue with 3 6 7 running in  normal mode   and neither triggerSave or save   were working    I changed to the jQuery TinyMCE plugin and without having to do anything else it s working now  I m assuming somewhere along the line they implemented some kind of auto triggerSave for the jQuery version of TinyMCE

User · Answer

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    lt input type  hidden  id  question html  name  question html    gt    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

User · Answer

This will ensure that the content gets save when you lose focus of the textarea       setup  function  editor                    editor on  change   function                          tinymce triggerSave

User · Answer

tinyMCE triggerSave    seems to be the correct answer  as it will sync changes from the iFrame to your textarea   To add to the other answers though - why do you need this  I had been using tinyMCE for awhile and hadn t encountered issues with form fields not coming through  After some research  it turned out to be their  auto patching  of form element submits  which is on by default - http   www tinymce com wiki php Configuration3x submit patch  Basically  they redefine submit to call triggerSave beforehand  but only if submit hasn t already been redefined by something else   if   n submit nodeType  amp  amp   n submit length        t formElement   n      n  mceOldSubmit   n submit      n submit   function                Save all instances         tinymce triggerSave            t isNotDirty   1           return t formElement  mceOldSubmit t formElement              So  if something else in your code  or another 3rd party library  is messing with submit  their  auto patching  won t work and it becomes necessary to call triggerSave   EDIT  And actually in the OP s case  submit isn t being called at all  Since it s ajax d  this is bypassing the  auto patching  described above

User · Answer

First of all    You must include tinymce jquery plugin in your page  jquery tinymce min js  One of the simplest and safest ways is to use getContent and setContent with triggerSave   Example   tinyMCE get  editor id   setContent tinyMCE get  editor id   getContent    newdata   tinyMCE triggerSave

[jquery] jQuery and TinyMCE: textarea value doesn't submit

Examples related to jquery

Examples related to tinymce