TinyMCE Value Returns NULL/ no value on the first submit

Question

I'm new in the TinyMCE...and I'm still wondering about this problem

I have form which loaded dynamically from 1 page. And the form has tinyMCE textarea on it. And on the first submit after I put some values on the text area, the value of the textarea is not received by $_REQUEST['Sub-Headline']. I have to click the submit button again, and sometimes I need to re-open the form in order for the value to be received by $_REQUEST['Sub-Headline'];

Can you guys suggest me what I need to check and what options/other things that I should add?

Here is part of code of the form :

TinyMCE

<script type="text/javascript">
    tinyMCE.init({
            mode : "textareas",
        theme : "advanced",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,undo,redo",        
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
        convert_urls : false,
        plugins : "legacyoutput"
    });
</script>

FORM

    <form action="web-block/forms/process-001.php" id="Frm001" method="post" class="general-form" enctype="multipart/form-data">
    <div class="input-wrap">
        <input class="clearme" name="Headline" value="<?php echo $Headline;?>" id="headline"/>
    </div>

    <div class="input-wrap">
    <textarea class="clearme" name="Sub-Headline" id="subheadline"><?php echo $SubHeadline;?></textarea>
    </div>

<label>Main Image</label>
<div class="up-mask">
    <span class="file-wrapper">
      <input type="file" name="pics" class="photo" id="pics" />
      <span class="button">
         <span class="default-txt">Upload Photo (Max Size 300Kb, 960x567 pixels)</span>
      </span>
    </span>
</div><!-- .up-mask -->

<input type="hidden" name="Key" id="Key" value="<?php echo urlencode($Key);?>"/>
<input type="submit" class="submit-btn" value="Save" />
<a href="#" id="reset">Reset</a>
<span class="save-notice"></span>
</form>

SUBMIT CODE

$(document).ready(function() {
    var options = {
        beforeSubmit: function() {
            alert("kuntul");
            tinyMCE.triggerSave();
        },
        success: function() {
            $('span.save-notice').text('Save Changed Successfully');
            $('span.save-notice').show(2000);
                $('span.save-notice').hide(2000);
        }
    };
    $('#Frm001').submit(function() { 
            $(this).ajaxSubmit(options); 
            return false; 
        });
});      
</script>

Answer 1

You will have to call tinymce.triggerSave() before you submit the form.