Maina David
Maina David

Reputation: 25

Tiny MCE editor unable to pass textarea content

The text editor works fine but no data is passed when i click the save button

This is the script for tiny mce editor i'm using for the textarea

  <script>
        tinymce.init({
        selector: 'textarea#txtAnnex_two'
        });
  </script>

The text area is in a modal-dialog where the textarea without tiny mce editor passes the contents just fine but when adding the editor, no data is passed.

<div class="input-group">
  <span class="input-group-addon">
  <i class="fa fa-pencil bigger-110"></i>
    </span>
    <textarea class="form-control" name="txtAnnex_two" id="txtAnnex_two"></textarea>
</div>

The button-save when clicked runs a function to check if there is content in the text area before saving. It works fine without the editor but returns a null value when adding the editor.

<button class="btn btn-white btn-success btn-round" onclick="mySaving_Annex_two()"><i class="ace-icon fa fa-times green2"></i>Save</button>

This is the save function

function mySaving_Annex_two(){

$myAnnex_two = $("input[name*='txtAnnex_two']").val();

if($myAnnex_two == "" || $myAnnex_two == null)
    {
        MyNotify('warning' , ' Kindly enter the Explanatory Notes!');
    }
else
    {
        var obj = {"myPC_Globe_ID" : $myPC_Globe_ID, 
                                "myAnnex_two_Local" : $myAnnex_two_Local,
                                 "myAnnex_two" : $myAnnex_two};
        var myJSON = JSON.stringify(obj);
        $.ajax({
        url: "../classes/class_pc_cec_planning.php", 
        type: "post",
        data: {'myJSON_Annex_two': myJSON}, 
        success: function(data){
            myDisplay_Annex_two($myPC_Globe_ID);
            MyNotify('success' , ' PC Annex II saved successfully!');
        }
    });

$("#myAddEdit_Annex_two_Dialog").modal("hide");
return false;
}


}

Upvotes: 0

Views: 508

Answers (1)

Dallas Clark
Dallas Clark

Reputation: 4112

To retrieve the content of the editor, you need to use the editor's API to prepare and pass the value.

The API comes with a few extra options, like plain text (text) to strip out the HTML.

var htmlContent = tinymce.activeEditor.getContent();
var textContent = tinymce.activeEditor.getContent({format: 'text'});

See getContent for more details on how to use this function.

In your example above, change $myAnnex_two = $("input[name*='txtAnnex_two']").val(); to var content = tinymce.activeEditor.getContent();.

Upvotes: 1

Related Questions