当我填写所有输入时，提交按钮不工作

submit button is not working when i fill all inputs

本文关键字：提交按钮工作输入更新时间：2023-09-26

我有一个有一些字段的表单，为了安全传递和减少垃圾邮件，我嵌入了一些JS代码来禁用提交按钮，直到所有字段都填满。

问题是当我填写所有字段时，提交按钮仍然被禁用。

<<p> JS代码/strong>
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;
<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>
小提琴。

我看到您已经为所有input标签添加了onKeyup="checkform()"。请对所有的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;

为想要成为必填字段的输入字段添加一个'mandatory-field'类。

例如

——

<input type="text" onKeyup="checkform()" placeholder="Job Title" name="positiontitle" class="mandatory-field">

您可以尝试使用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();});

请参阅此演示

问题是window.onload—没有事件侦听器来检查后续事件上表单字段的状态。我建议将该函数绑定到keyup或类似的函数，这样它将在检测到键盘输入时进行验证，并相应地更改DOM状态。

我个人会将一个事件绑定到正在提交的表单，然后您可以遍历并验证字段，如果表单可以提交，则允许它正常继续，否则我会返回false以在此时停止提交

你的事件只触发一次。

试试这个

document.querySelector('input[type=submit]').onchange = checkform;