Summernote detecting if any text has been typed

Am learning Javasript/Jquery so any help will be welcomed.

I have replaced a textarea in a form a Summernote object to allow users to format text for emails, which is then output using PHP

Basically it all works well except that when it was a plain textarea I used an onkeyup function to detect if there was any text, and enable/disable the “send email” button.

I cannot seem to get this to work with Summernote.

my latest try:

    callbacks: {
        onKeyup: function (e) {
          var x = ($('#summernote').summernote('isEmpty')) ;
            $('#btnEmail1').prop("disabled", x );

I have also tried using the onchange callback, but that doesn’t work either…

document.getElementById('summernote').onkeyup = function () {
  if (this.value.length === 0) {
    // disable submit button
 } else {
   // enable submit button

I no longer use jQuery, so I did partially vanilla js and pseudo-code. I don’t know why you would need a callback function as you could do something like the above and then if the user clicks the submit button have a small message that says something like “Message is required!” or simply have the submit unhide when the user starts typing a message.

1 Like

Thanks for your help.

Took your advice and added check on the submit button:

$("#frmEmail").submit(function (event) {
    event.preventDefault(); //prevent default action 
    var subject = document.getElementById('subject').value;
    var codeHtml = $('#summernote3').summernote('code');
    if (subject.length <5  || codeHtml.length < 16) {
        alert("Please ensure both Subject and Message are entered correctly");
        return false;

// do the post usingy AJAX

(took me a while to realise that an empty Summernote unit returns opening and closing paragraph tags with a break tag between. so have to allow for those 11 characters when checking the length of the HTML code returned from it)

Sponsor our Newsletter | Privacy Policy | Terms of Service