CODEWITHSUNDEEP
javascriptjqueryckeditorrich-text-editorprop
Lovelock
Lovelock

Reputation: 8085

checking the value of CKEditor and disabling the submit button if no content

running a basic function that disables a form submit button depending on the input length.

I am using this:

    // check if the newpost text area in empty on page load and also input change
$(document).ready(function(){
    disableNewPost();
    $('#newpost').keyup(disableNewPost);
});

// disable new post submit button if the new post ckeditor is empty
function disableNewPost() {
    if ($('#newpost').val().length > 0) {
        $(".addnewpostbtn").prop("disabled", false);
    } else {
        $(".addnewpostbtn").prop("disabled", true);
    }
}

This works with a normal text area see here:http://jsfiddle.net/QA22X/

But when working with CKEditor it doesn't work.

I have done my research, but cant find anything that works.

I saw this and tried it:

    // check if the newpost text area in empty on page load and also input change
$(document).ready(function(){
    disableNewPost();
    var e = CKEditor.instances['#newpost']
    e.on( 'keyup', function( event ) {
    disableNewPost();
    });
});

// disable new post submit button if the new post ckeditor is empty
function disableNewPost() {
    var value = CKEDITOR.instances['#newpost'].getData();
    if ($(value).length > 0) {
        $(".addnewpostbtn").prop("disabled", false);
    } else {
        $(".addnewpostbtn").prop("disabled", true);
    }
}

But that also doesn't work.

Any help on this?

Upvotes: 0

Views: 1788

Answers (2)

Joel Peltonen
Joel Peltonen

Reputation: 13432

Archers answer might work, but here's another plausible solution I think

  1. When the editor is ready and content is loaded, do editor.resetDirty() (instanceready, setData callback or whatever suits you)
  2. Create a setInterval() and inside it check if editor is dirty with editor.checkDirty()
  3. When it is not dirty, do $(".addnewpostbtn").prop("disabled", false); or whatever you need
  4. When it is, do $(".addnewpostbtn").prop("disabled", true); or whatever you need

You can performance tweak it quite a bit with flags and a jquery cache and whatnot, but the basic idea is that use the CKEditor API to check if it's dirty (content has changed). Also you probably have other variables for the dirty check as well, like is your other form elements dirty, but you can figure them out.

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

As mentioned above, editors like this have a tendency to have empty elements in them, or return the content inside a wrapper element, so the value will never be empty, even though it appears to be. If that is the case in this instance then this will help...

// disable new post submit button if the new post ckeditor is empty
function disableNewPost() {
    var value = CKEDITOR.instances['#newpost'].getData();
    if ($(value).text() == "") {
        $(".addnewpostbtn").prop("disabled", false);
    } else {
        $(".addnewpostbtn").prop("disabled", true);
    }
}

Upvotes: 1

Related Questions