Why does serialize form return empty textarea value?

Question

Why does serialize form return empty textarea value?

Navigation

#1 by (2 votes)

1

Good evening,

I am creating a CMS based on bootstrap php and ajax what happens to me and that I can send the data of form all method POST minus the value of textarea always returns empty I'm using 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>

jquery ajax

asked by anonymous 29.03.2015 / 21:11

1 answer

Bootstrap dropdown menu is not working How to pass JSON array as a parameter and access its objects in another function?

score 2 · Accepted Answer

The problem is that with tinymce , textarea ceases to exist and text editing happens at a iframe .

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

Solution 1

Add a hidden field in your form:

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

And then, before calling .serialize() , you can fetch the data from% tinymce and pass them to the hidden field as follows:

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

Solution 2

You can also tell tinymce to pass the changes to the iframe element before calling textarea as follows:

tinyMCE.triggerSave();

Solution 3

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

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

Solution 4

When you start tinymce you can instruct it to always sync to textarea :

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

These and other solutions in this SOEN question.