我有一个表单，它有一些字段，用于填写所有字段并传递表单并减少垃圾邮件我编写了一些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>
任何解决方案都将受到赞赏。
答案 0 :(得分：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>