Why I can’t get a value of textarea from tinymce editor using FormData in Jquery plugin?

I’m using Jquery plugin with Tinymce editor to add some post data to Database using Codeigniter.

My Issue I can’t get all the value from textarea which i used Tinymce Editor but another field is working very well.

Here is my Tinymce editor

<script type="text/javascript">
    $(document).ready(function () {
        tinymce.init({
            selector: "textarea",
            theme: "modern",
            base_url: false,
            external_filemanager_path: "/filemanager/",
            filemanager_title: "Responsive Filemanager",
            external_plugins: {"filemanager": "<?PHP echo base_url('../filemanager/plugin.min.js') ?>"},
            relative_urls: false,
            plugins: [Full uption ],
            toolbar1: "insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify ",

        });
    });
</script>

And This is my Jquery Plugin

<script>
    $(document).ready(function () {

        $("#do_upload").on('click', function () {
            if ($("#ch_title").val() === '') {
                alert("You have to input all Chineses language field");
                $("#ch_title").addClass('error');
            }
            if ($("#kh_title").val() === '') {
                alert("You have to input all Khmer language field");
                $("#kh_title").addClass('error');
            }
        });
        $("#eng_form").submit(function (e) {
            e.preventDefault();
        }).validate({
//             ignore: "",
            rules: {
                eng_title: {
                    required: true
                },
                eng_dd: {
                    required: true
                },
                kh_dd: {
                    required: true
                },
                eng_up_img: {
                    required: true
                }, 
            },
            submitHandler: function () {

                $.ajax({
                    url: '<?PHP echo base_url('image/rupload'); ?>',
                    type: 'POST',
                    data: new FormData($('#eng_form')[0]),
                    contentType: false,
                    cache: false,
                    dataType: 'json',
                    processData: false,
                    beforeSend: function (xhr) {
                        $("#teset").modal('show');
                        $('<img style="width:60px; height:auto;" src="<?PHP echo base_url('assets/admin/img/ajax-loader-2.gif'); ?>"/>').appendTo("#loading_img");
                    }, complete: function (jqXHR, textStatus) {
                        if (textStatus == 'success') {
                            $("#loading_img").html('');
                            $("#teset").modal('hide');
                            $("#img_modal").modal('hide');
                            $($('#img_upload')).closest($('form')).find("input[type=text], textarea").val(" ");
                            window.location.href = '<?PHP echo base_url('slide/right'); ?>';
                        }
                    }, success: function (data) {

                        var size = data.img_pro.upload.file_size;
                        if (size >= 2048) {
                            alert("Your images size can't more than 2MB" + "Your size:" + size);
                        } else if (data.res === false) {
                            alert("Your images is not correct");
                        }
                    }
                });
            }

        });
    });
</script>

The result I can’t get all the textarea value if I using Tinymce editor for array variable DD and description

Answer

It is likely that you need to update the <textarea> with the contents of the editor before you capture the form’s data. I am guessing, and so assume you are grabbing the field values when you create the FormData object.

If that is true, then somewhere in the FormData constructor move the tinymce editor contents to the <textarea> by calling tinymce.Editor.save(). For instance, if your activeEditor instance is referenced in a var named editor then editor.save() will update the associated <textarea> element .

After that you can grab the value of the field using the JQuery .val() function, ie. someVar = $(#fieldName).val(); Obviously, you need to provide the appropriate names in place of someVar and #fieldName.

Advertisement

Answer