註冊按鈕啓用當最後一個字段輸入

Question

所以我有我的網站上的註冊表格，當我試圖確保每個字段填充之前用戶能夠點擊註冊。會發生什麼是，如果你只填寫最後一次輸入（性別），所有字段都被輸入。這裏是我的代碼：

function validateForm() { 
    var x = document.forms["signUp"]["username", "firstname", "lastname", "email", "password", "passwordconfirm", "DOBMonth", "DOBDay", "DOBYear", "gender"].value; 
    if (x == "") { 
     document.getElementById("signUp").style.opacity = "0.6"; 
     document.getElementById("signUp").disabled = true; 
     return false; 
    } else { 
     document.getElementById("signUp").style.opacity = "1"; 
     document.getElementById("signUp").disabled = false; 
    } 
} 

這裏是HTML：

<form action="insert.php" method="POST" name="signUp"> 
    <h2 style="white-space: nowrap;font-size:3vmin;">SIGN UP AND MEET NEW PEOPLE!</h2> 
    <br> 
    <br> 
    <input class="inputPlaceholder" type="text" name="username" id="username" onkeydown="issetcheckusername(); validateForm();" onchange='issetcheckusername(); validateForm();' placeholder="Username" maxlength="16"> 
    <br> 
    <br> 
    <input class="inputPlaceholderName" type="text" name="firstname" id="firstname" onkeydown="issetcheckfirstname(); validateForm();" onchange='issetcheckfirstname(); validateForm();' placeholder="First name"> 
    <input class="inputPlaceholderName" type="text" name="lastname" id="lastname" onkeydown="issetchecklastname(); validateForm();" onchange='issetchecklastname(); validateForm();' placeholder="Last name"> 
    <br> 
    <br> 
    <input class="inputPlaceholder" type="email" name="email" id="email" onkeydown="issetcheckemail(); validateForm();" onchange='issetcheckemail(); validateForm();' placeholder="E-mail"> 
    <br> 
    <br> 
    <input class="inputPlaceholder" type="password" name="password" id="password" onkeyup='issetcheckpassword(); validateForm();' onchange='issetcheckpassword();' placeholder="Password" maxlength="24"> 
    <br> 
    <br> 
    <input class="inputPlaceholder" type="password" name="passwordconfirm" onkeyup='check(); validateForm();' onchange="check(); validateForm();" id="passwordconfirm" placeholder="Confirm password" maxlength="24"> 
    <br> 
    <br> 
    <div class="inputPlaceholder" id="birthday" onchange="issetcheckbirthday(); validateForm();"> 
    <p style="cursor:text;display:inline;">Birthday</p> 
    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> 
    <select name="DOBMonth" id="DOBMonth" class="Dates" onchange="issetcheckbirthday(); validateForm();"> 
     <option class="inputPlaceholderBirthday">Month</option> 
     <option value="1">January</option> 
     <option value="2">February</option> 
     <option value="3">March</option> 
     <option value="4">April</option> 
     <option value="5">May</option> 
     <option value="6">June</option> 
     <option value="7">July</option> 
     <option value="8">August</option> 
     <option value="9">September</option> 
     <option value="10">October</option> 
     <option value="11">November</option> 
     <option value="12">December</option> 
    </select>&nbsp;&nbsp;&nbsp; 

    <select name="DOBDay" id="DOBDay" class="Dates" onchange="issetcheckbirthday(); validateForm();"> 
     <option>Day</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
     <option value="9">9</option> 
     <option value="10">10</option> 
     <option value="11">11</option> 
     <option value="12">12</option> 
     <option value="13">13</option> 
     <option value="14">14</option> 

    </select>&nbsp;&nbsp;&nbsp; 

    <select name="DOBYear" id="DOBYear" class="Dates" onchange="issetcheckbirthday(); validateForm();"> 
     <option>Year</option> 
     <option value="2017">2017</option> 
     <option value="2016">2016</option> 
     <option value="2015">2015</option> 
     <option value="2014">2014</option> 
     <option value="2013">2013</option> 
     <option value="2012">2012</option> 
     <option value="2011">2011</option> 
     <option value="2010">2010</option> 
     <option value="2009">2009</option> 
     <option value="2008">2008</option> 
     <option value="2007">2007</option> 
     <option value="2006">2006</option> 


    </select> 
    </div> 
    <br> 
    <div class="inputPlaceholder" id="gender"> 
    <p style="display:inline;">Gender</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <input type="radio" name="gender" value="1" id="gender" onchange="issetcheckgender(); validateForm();"> Male&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <input type="radio" name="gender" value="0" id="gender" onchange="issetcheckgender(); validateForm();"> Female 
    </div> 
    <br> 
    <input class="inputPlaceholderFinish" id="signUp" type="submit" value="Sign Up" style="width:80%" disabled> 
</form> 

我明明留了一些年，天剛剛所以它不會太長（這個職位）我對於角色到目前爲止，對不起。

Answer 1

的問題是在你得到越來越值的方式：

var x = document.forms["signUp"]["username", "firstname", "lastname", "email", "password", "passwordconfirm", "DOBMonth", "DOBDay", "DOBYear", "gender"].value; 

這是沒有得到的數值爲所有表單域的正確途徑。

你需要通過他們循環，並檢查是否所有設置：

let allFilled = true; 

for (let i = 0; i < document.forms["signUp"].length ; ++i){ 
    if (document.forms["signUp"][i].value == ""){ 
     allFilled = false; //if any is not set mark the flag as false 
     break; //and stop checking any other inputs 
    } 
} 

if (!allFilled) { 
    document.getElementById("signUp").style.opacity = "0.6"; 
    document.getElementById("signUp").disabled = true; 
    return false; 
} else { 
    document.getElementById("signUp").style.opacity = "1"; 
    document.getElementById("signUp").disabled = false; 
    return true; //was missing here 
} 

作爲一個方面說明我強烈建議你添加JavaScript端的事件監聽器。它可以幫助您保持組織性，以及將來更易於更改。它還可以簡化設置聽衆的過程。