I apologize, if the title is not correctly set as I have no actual clue what is causing it, but my loop will always result in "false" statement.
Straight to the point, here is the code, same as below, if anyone prefer to check it in Codepen..
function Validation() {
if(!ValidateForm()) {
document.getElementById("errorBox").innerHTML = "Please double check, that you have answered all the questions and try again."
return false;
} else {
document.getElementById("errorBox").innerHTML = ""
alert("Thank you for your cooperation");
}
}
function ValidateForm() {
var a = document.getElementsByName('Activity');
var v = document.getElementsByName('Volunteers');
//var e = document.getElementsByName('Name');
for (var i = 0; i<a.length; i++) {
if (a[i].type == 'checkbox') {
if (a[i].checked) {
for (var j = 0; j<v.length; j++) {
if (v[j].type == 'checkbox') {
if (v[j].checked) {
alert("it werks!!")
return true;
}
}
}
return true;
} else {
return false;
}
}
}
}<form id="frmForm" name="frmForm" action="#" method="post" onsubmit="return Validation()">
<div class="row" style="margin-top: 20px;">
<div class="col-sm-12">
<div class="form-group">
<p>
<b>1. Which of the volunteer jobs did you like the most in the year 2018?</b>
</p>
<p style="margin-left: 16px;">
(You can choose one or more options as your answer)
</p>
<div style="margin-left: 35px;">
<input type="checkbox" id="Activity1" name="Activity" value="supplies" > 1<br>
<input type="checkbox" id="Activity2" name="Activity" value="food" > 2<br>
<input type="checkbox" id="Activity3" name="Activity" value="plastic" > 3<br>
<input type="checkbox" id="Activity4" name="Activity" value="clean" > 4<br>
<input type="checkbox" id="Activity5" name="Activity" value="painting" > 5<br>
<input type="checkbox" id="Activity6" name="Activity" value="zmps" > 6<br>
<input type="checkbox" id="Activity7" name="Activity" value="sumica" > 7<br>
<input type="checkbox" id="Activity8" name="Activity" value="blood" > 8<br>
<input type="checkbox" id="Activity9" name="Activity" value="volunteer" > 9<br>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-sm-12">
<div class="form-group">
<p>
<b>2. How much time are you prepared to spend as volunteer?</b>
</p>
<p style="margin-left: 16px;">
(You can only choose one option as your answer)
</p>
<div style="margin-left: 35px;">
<input type="radio" id="Volunteers1" name="Volunteers" value="oneWeek" > 1<br>
<input type="radio" id="Volunteers2" name="Volunteers" value="fiveWeek" > 2<br>
<input type="radio" id="Volunteers3" name="Volunteers" value="oneMonth" > 3<br>
<input type="radio" id="Volunteers4" name="Volunteers" value="fivemonth" > 4<br>
<input type="radio" id="Volunteers5" name="Volunteers" value="halfYear" > 5<br>
<input type="radio" id="Volunteers6" name="Volunteers" value="twoYear" > 6<br>
<input type="radio" id="Volunteers7" name="Volunteers" value="other" >
<input type="text" placeholder="other" /><br>
</div>
</div>
</div>
</div>
<button style="margin-top:30px;"type="submit" id="Submit" name="Submit">Send me away</button>
<div id="errorBox" style="margin-bottom:50px; color: red"></div>
</form>What I am trying to do, is make a function that will check the form. The given code is, of course, just a demo, as my form is more extensive. The code was supposed to check an answer and if checked, check the next one, and so on... I have tried to put if statements separated, but that only caused that after just first answer being checked, the code would send the message as if the whole form was filled.
And while we are at it, what if a form had a question with checkbox answer, saying other (write your answer), how would I make a code that would first check if the checkbox was checked and afterwards check if the input was also given?
I will really appreciate any help on the second part of the question, as well as for finding an error and correcting me on first part :)
EDIT:: Tested the code, using the console.log and only after all the checkboxes in first question and a radio in second question were selected, the form was tagged as correctly answered.
Another conclusion, it appears that for some reason, only for some answers in first question, the code will think they were not checked, while for others (like first answer), the code would accept it and continue as form correctly answered. Any explanation to this?
