Cannot fetch value from text editor

Iam using summer note editor. I tried to get the values from it and store in database. But the data is empty.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
</head>
<body>
  <div><input type="text" id="summernote"></div>
  <button type="button" onclick="callResult()" class="btn btn-primary waves-effect waves-light">
Add
</button> 
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });

function callResult()
{

$('#alerts').hide();
var text=$("#summernote").val(); 
 alert(text);
$.ajax({
type: "GET",
url: 'actionPage.php',
data:"text="+text, 
success: function(data) {
// alert(data);
if($.trim(data)=="success"){
$('#alerts').html("added");
$('#text').val("");

}

else{
$('#alerts').html("Failure some connection issues");

}
$('#alerts').show();
}

});
}

</script>
</body>
</html>

The alert(text) outputs an empty popup.

I have the tried the same kind of code for other forms with type=text, it worked well. But here I was not able to get the text from the editor using the ID. How to get the data from text editor.

Solution

You can get the actual value using:

let text = $("#summernote").summernote("code");

Explanation:

In your code you are trying to get the value using:

var text=$("#summernote").val();

That will just give you the value of the below element:

<input type="text" id="summernote" style="display: none;">

which would be null.

To get the actual value of the summernote text field you can do:

You can get the input from the summernote field using:

let text = $("#summernote").summernote("code");