Question

我有一个表单，我在textareas中使用CKEditor来格式化textarea的内容，例如子弹，字体颜色，大小等。

我写了以下JS代码来禁用提交按钮，直到填写所有特定字段。由于CKEditor，JS代码适用于文本字段，但不适用于textarea字段。

如果可能的话，我想让这个JS代码在使用CKEditor的textareas上工作。

JS代码

<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调用

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

Answer 1

试试这个：

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

在初始化时绑定更改事件，并按CKEDITOR.instances['editor1'].getData()

获取数据

见文件： http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-on

禁用提交按钮，直到填写ckeditor字段

1 个答案: