Idk Idk - 22 days ago 10
HTML Question

Sign up button enables when last field is entered

So I have the register form on my website, and when I'm trying to make sure every field is filled before the user is able to click Sign Up. What happens is that if you just fill the last input (gender) it counts as all fields are entered. Here is my code:

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;
}
}


And here is the 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>


I've obviously left out some years and days just so it wouldn't get too long (for this post) I'm sorry about the characters being so far right.

Answer Source

The problem is in the way you get are getting values:

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

This is not the correct way of getting the values for all the form fields.

You need to loop through them and check if all are set:

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
}

As a side note i strongly advise you to add the event listeners on the javascript side. It helps you keep it organized as well as it is easier to change in the future. It can also simplify the process of setting up the listeners.