Why does form serialize return empty textarea value?

Question

Good night,

I’m creating a CMS based on bootstrap php and ajax what happens to me and that I can send the data of form all by method POST minus the value of the textarea always returns empty I am using the tinymce as an html editor.

Code used

<script> 
$(document).on("click", "#novo", function(e) { 
    var postData = $("#form_novo").serialize();
    var titulo = $("#titulo").val();
    var url = $("#url").val();
    if(titulo === '' || url === ''){
        toastr.error('Preencha os campos obrigatórios!', 'Campos');
    }else{
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "modulos/footer/guardar.php",
            data: postData,
            cache: true
        }).done(function(msg) {
            toastr.success('Dados guardados com sucesso!', 'Footer');
        }).fail(function(data) {
            toastr.error('Ocorreu um erro!', 'Erro');
        });
    }
});    
</script>

Answer 1

The problem is that with the tinymce, to textarea no longer exists and editing the text takes place in a iframe.

The .serialize() will locate elements, but the textarea is not in use, so will an empty value.

Hiccup 1

Add a hidden field to your form:

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

And then before you call .serialize(), you can get the data from iframe of tinymce and pass them into the hidden field as follows:

$('#texto').val(tinyMCE.get('meuTinymce').getContent());

Solution 2

You can also tell tinymce to move the changes to the element textarea before you call the .serialize() as follows:

tinyMCE.triggerSave();

Solution 3

You can also attach an event to the form so that before the .serialize() he tells the tinymce that should pass the updated values to the textarea:

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

Solution 4

When you started the tinymce you can instruct the same to always synchronize the textarea:

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

---

^{These and other solutions in this question of SOEN.}