Disable submit button till filling ckeditor field

Question

I have a form and i used CKEditor in textareas to format the content of textarea e.g. bullets, font color, size etc.

i have written below JS code to disable the submit button till filling all some specific fields. JS code works on text fields but not in textarea field because of CKEditor.

If possible i want to also make this JS code to work on textareas where CKEditors are used.

JS Code

<script type="text/javascript">     

$(function() {

$(function() {
    $('#sbtbtn').attr('disabled', 'disabled');
});


$('input[type=text],textarea,input[type=password]').keyup(function() {

    if ($('#target1').val() !='' &&
    $('#editor1').val() != '') {

        $('#sbtbtn').removeAttr('disabled');
    } else {
        $('#sbtbtn').attr('disabled', 'disabled');
    }
});
    });


    </script>

HTML

<form action="insert.php" method="post" class="ara-form" name="theform" >
                <header>Enter Job Details</header>

                <fieldset>                  
                    <div class="row">
                        <section class="col col-6">
                            <label class="input">
                            <i class="icon-append icon-company"></i>
                                <input type="text" id="target1" placeholder="Job Title" name="positiontitle">
                                <div class="note note-error">This is a required field.</div>
                                <span class="error"></span>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" id="target2" placeholder="Organization / Company Name" name="companyname">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                    </div>

                    <div class="row">
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" id="target3" placeholder="Location" name="location" >
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                     </div>             
                </fieldset>

                <fieldset>  

                    <section>
                        <label class="textarea">

                            Tell us about your company background
                            <textarea id="editor1" rows="10" cols="80"  name="background" placeholder="Tell us about your company background"></textarea>CKEDITOR.replace( 'editor1' );

var textarea = document.body.appendChild( document.createElement( 'textarea' ) );
CKEDITOR.replace( textarea );
                        </label>
                    </section>                  
                    <section>
                        <label class="textarea">

                            Job Summary
                            <textarea id="editor2" rows="10" cols="80"  name="summary" placeholder="Job Summary"></textarea>
                        </label>
                    </section>
                </fieldset>
                <footer>
                    <p>Fill all fields to activate the submit button.</br>
                    Thanks</p><i class="fa fa-check" style="float: right; position: relative; right: 22px; color: white; z-index: 1; padding-top: 23px;"></i><input 
                    class="button" type="submit" value="Submit"

                    id="sbtbtn" />

                   <div style="float: right; padding-right: 10px;"><?php
                   include "../module/back.php";
                   ?></div>
                    </footer>
            </form>

CKEditor call

 <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>

Answer 1

try this:

CKEDITOR.replace('editor1', {
    on: {
        change: function() {
            var inst = CKEDITOR.instances['editor1'];
            if (inst.getData() != '') {
                $('#sbtbtn').removeAttr('disabled');
            } else {
                $('#sbtbtn').attr('disabled', 'disabled');
            }
        }
    }
});

Bound the change event on initalizing, and get data by CKEDITOR.instances['editor1'].getData()

See the document: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-on