Why can’t I pass summernote name="" via ajax

Question

After some tests I saw that summernote does not pass the name="" via ajax request, someone can tell me why?

$(document).ready(function(){
    $(document).on('click', '#submit_btn', function(){
        var titulo = $('#titulo').val();
        var dica = $('#dica').val();
        $.ajax({
            url: 'salvar_dica.php',
            type: 'POST',
            data: {
                'save': 1,
                'titulo': titulo,
                'dica': dica,
            },
            success: function(response){
                $('#titulo').val('');
                $('#dica').val('');
                $('#display_area').append(response);                
            }
        });
    });
});

<textarea type="text" name="dica" id="dica" class="summernote"  class="form-control"></textarea>

$(document).ready(function() {
    $('.summernote').summernote();
});

I ran without ajax and everything went well, so I realized I can not pass HTML tag via ajax!

Answer 1

When typing the text via summernote it will not be inserted in the <textarea>, but in the generated editor, so when trying to take the textarea with .val it will return empty.

To get from summernote use their API as indicated in the documentation: https://summernote.org/getting-started/#basic-api

Example:

var dica = $('<seu elemento>').summernote('code'); //Pega o conteudo HTML gerado

Testing:

$(document).ready(function() {
    var editor = $("#editor");
    editor.summernote();
    
    $("#getText").click(function () {
        console.log( editor.summernote('code') );
    });
});

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>


<textarea id="editor"></textarea>

<button id="getText">Ver texto</button>

Answer 2

Ajax normally sends the contents of textarea used by Summernote, and backend, for example PHP, the content of textarea is received by your name, as in any form element, with $_POST['dica'];.

I see in this part $('#dica').val(''); of sponse Ajax you want to clear the text in the editor, but this will only clear the contents of the textarea.

To clear the text of the Summernote editor (latest versions) you can use:

$("#dica").summernote("reset");

Soon your code would look like this:

$(document).ready(function(){
    $(document).on('click', '#submit_btn', function(){
        var titulo = $('#titulo').val();
        var dica = $('#dica').val();
        $.ajax({
            url: 'salvar_dica.php',
            type: 'POST',
            data: {
                'save': 1,
                'titulo': titulo,
                'dica': dica,
            },
            success: function(response){
                $('#titulo').val('');
                $('#dica')
                .val('')  // apaga o texto do textarea usado pelo summernote
                .summernote("reset"); // apaga o texto do editor
                $('#display_area').append(response);                
            }
        });
    });
});

Functional example

Answer 3

textarea does not return in .val(), use:

var dica = $('#dica').text();