我有一个带有一些字段的表单，为了安全传递和减少垃圾邮件发布，我嵌入了一些JS代码来禁用提交按钮，直到所有字段都填满。
问题是当我填写所有字段时仍然提交按钮被禁用。
JS代码
function checkform() {
var f = document.forms["theform"].elements;
var cansubmit = true;
for (var i = 0; i < f.length; i++) {
if ("value" in f[i] && f[i].value.length == 0)
cansubmit = false;
}
document.getElementById('submitbutton').disabled = !cansubmit;
}
window.onload = checkform;
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" onKeyup="checkform()" placeholder="Job Title" name="positiontitle">
<span class="error"></span>
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Organization / Company Name" name="companyname">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Location" name="location" >
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Job Category e.g. IT" name="jobcategory">
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Employment Type e.g. Full Time" name="employmenttype">
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Salary e.g. 5000$" name="salary">
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Duration e.g. Permanent" name="duration">
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Timing e.g. 8 AM - 4 PM" name="timing">
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Nationality" name="nationality">
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Number of Vacancy e.g. 2 Post(s)" name="numberofvacancy">
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Experience e.g. 3 Years" name="experience">
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Closing Date" id="datepicker" name="closingdate">
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Gender" name="gender">
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" onKeyup="checkform()" placeholder="Education e.g. Bachelor" name="education">
</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>
<section>
<label class="textarea">
Job Summary
<textarea id="editor2" rows="10" cols="80" name="summary" placeholder="Job Summary"></textarea>
</label>
</section>
<section>
<label class="textarea">
Job Duties and Responsibilities
<textarea id="editor3" rows="10" cols="80" name="duty" placeholder="Job Duties and Responsibilities"></textarea>
</label>
</section>
<section>
<label class="textarea">
Qualification Needed
<textarea id="editor4" rows="10" cols="80" name="qualification" placeholder="Qualification Needed"></textarea>
</label>
</section>
<section>
<label class="textarea">
Skills Needed
<textarea id="editor5" rows="10" cols="80" name="skill" placeholder="Skills Needed"></textarea>
</label>
</section>
<section>
<label class="textarea">
Submission Guideline
<textarea id="editor6" rows="10" cols="80" name="submission" placeholder="Submission Guideline"></textarea>
</label>
</section>
<section>
<label class="textarea">
Words for making search easy e.g IT | Officer | Manager | ...
<textarea id="editor7" rows="10" cols="80" name="search" placeholder="Words for making search easy e.g IT | Officer | Manager | ... "></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="submitbutton" />
</footer>
</form>
答案 0 :(得分：1)
我发现您为所有onKeyup="checkform()"代码添加了input。请对所有textarea执行相同的操作。希望这能解决。
编辑：使用以下代码。
function checkform() {
var f = document.forms["theform"].elements;
var cansubmit = true;
for (var i = 0; i < f.length; i++) {
console.log(f[i].className);
if(f[i].type=="text" && f[i].className=="mandatory-field"){
if ("value" in f[i] && f[i].value.length == 0){
cansubmit = false;
}
}
}
document.getElementById('submitbutton').disabled = !cansubmit;
}
window.onload = checkform;
添加一个类＆＃39;必填字段＆＃39;到想要成为必填字段的输入字段。
例如 -
<input type="text" onKeyup="checkform()" placeholder="Job Title" name="positiontitle" class="mandatory-field">
答案 1 :(得分：1)
您可以尝试使用jquery。
function checkform() {
var f = document.forms["theform"].elements;
var cansubmit = true;
for (var i = 0; i < f.length; i++) {
if ("value" in f[i] && f[i].value.length == 0)
cansubmit = false;
}
if(cansubmit){
$('#submitbutton').removeAttr('disabled');
}
else{
$('#submitbutton').attr('disabled', 'disabled');
}
}
$(document).ready(function(){checkform();});
请参阅此Demo
答案 2 :(得分：0)
问题是window.onload - 没有事件监听器检查后续事件中表单字段的状态。我建议将函数绑定到keyup或类似函数，以便它在检测到的键盘输入上进行验证并相应地更改DOM状态。
答案 3 :(得分：0)
我个人会将事件绑定到正在提交的表单，然后你可以通过并验证字段，如果表单可以提交，允许它继续正常，否则我会返回false来停止那时提交。
答案 4 :(得分：0)
您的活动只会触发一次。
试试这个
document.querySelector('input[type=submit]').onchange = checkform;