Question

我有一个表单，它有一些字段，用于填写所有字段并传递表单并减少垃圾邮件我编写了一些JS代码以使某些字段成为必填项并禁用提交按钮直到填充所有字段，JS非常适合输入类型=文字，但它不适用于texarea。

JS代码

 <script type="text/javascript">
     $(document).ready(function() {

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

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

    if ($('#target1').val() !='' &&
    $('#target2').val() != '' &&
    $('#target3').val() != '' &&
    $('#target4').val() != '' &&
    $('#target5').val() != '' &&
    $('#target6').val() != '' &&
    $('#target7').val() != '' &&
    $('#target8').val() != '' &&
    $('#target9').val() != '' &&
    $('#target10').val() != '' &&
    $('#target11').val() != '' &&
    $('#target12').val() != '' &&
    $('#target13').val() != '' &&
    $('#target14').val() != '' &&
    $('#target15').val() != '' &&
    //this is for textarea id
    $('#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>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" id="target4" placeholder="Job Category  e.g. IT" name="jobcategory">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text"  id="target5" placeholder="Employment Type  e.g. Full Time" name="employmenttype">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" id="target6" placeholder="Salary  e.g. 5000$" name="salary">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" id="target7" placeholder="Duration  e.g. Permanent" name="duration">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i> 
                                <input type="text" id="target8" placeholder="Timing  e.g. 8 AM - 4 PM" name="timing">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" id="target9" placeholder="Nationality" name="nationality">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" id="target10" placeholder="Number of Vacancy  e.g. 2 Post(s)" name="numberofvacancy">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" id="target11" placeholder="Experience  e.g. 3 Years" name="experience">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" placeholder="Closing Date" id="datepicker" name="closingdate">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" id="target13" placeholder="Gender" name="gender">
                                <div class="note note-error">This is a required field.</div>
                            </label>
                        </section>
                        <section class="col col-6">
                            <label class="input">
                                <i class="icon-append icon-company"></i>
                                <input type="text" id="target14" placeholder="Education  e.g. Bachelor" name="education">
                                <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>
                        </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>

任何解决方案都将受到赞赏。

Answer 1

你指的是像输入一样的textarea [type = textarea]。这是错误的。

像这样更新脚本..

<script type="text/javascript">
 $(document).ready(function() {

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

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

if ($('#target1').val() !='' &&
$('#target2').val() != '' &&
$('#target3').val() != '' &&
$('#target4').val() != '' &&
$('#target5').val() != '' &&
$('#target6').val() != '' &&
$('#target7').val() != '' &&
$('#target8').val() != '' &&
$('#target9').val() != '' &&
$('#target10').val() != '' &&
$('#target11').val() != '' &&
$('#target12').val() != '' &&
$('#target13').val() != '' &&
$('#target14').val() != '' &&
$('#target15').val() != '' &&
//this is for textarea id
$('#editor1').val() != '') {

    $('#sbtbtn').removeAttr('disabled');
} else {
    $('#sbtbtn').attr('disabled', 'disabled');
}
});
});</script>

JSFIDDLE DEMO

强制字段不适用于textarea

1 个答案: