How to detect if div is visible and contains input field

Question

This is NOT the same as querySelectorAll detecting value in input .

I'm not asking whether an input field has a value. I am asking how to detect if the currently visible div contains an input field. I am asking a new question as requested by stackoverflow.

I have a series of divs, going from id question0 to question35. For the purposes of my question though, we only need to look at these few divs as follows:

<div id="requiredMessage" style="display:none"><p>This field is required</p></div>

<div class="questionholder" id="question0" style="display:block">
    <a class="text2button" onclick="displayquestion(1)">Start</a>
</div>
<div class="questionholder" id="question1" style="display:none">
    <h5>Surname</h5>
    <input class="input1" name="ln"><br>    
    <a class="text2button" onclick="displayquestion(2)">Next</a>
</div>
<div class="questionholder" id="question2" style="display:none">
    <h5>Given Name</h5>
    <input class="input2" name="gn"><br>
    <a class="text2button" onclick="displayquestion(3)">Next</a>
</div>
<div class="questionholder" id="question3" style="display:none">
    <h5>Relationship Surname</h5>
    <input class="input3" name="REL"><br>
    <a class="text2button" onclick="displayquestion(4)">Next</a>
</div>
<div class="questionholder" id="question4" style="display:none">
    <h5>Are multiple names involved?</h5><br>
    <a class="text2button" onclick="displayquestion(5)">Yes</a>
    <a class="text2button" onclick="displayquestion(6)">No</a>
</div>
<div class="questionholder" id="question5" style="display:none">
    <h5>What is the second name?</h5>
    <input class="input5" name="secondName"><br>
    <a class="text2button" onclick="displayquestion(6)">Next</a>
</div>
<div class="questionholder" id="question6" style="display:none">
    <h5>What is your fav color?</h5>
    <input class="input6" name="favColor"><br>
    <a class="text2button" onclick="displayquestion(7)">Next</a>
</div>

As you can see, both divs contain a button in the tag which fire a javascript function called displayquestion(a):

function displayquestion(a){
    var b = a-1;
    var currentInput = '';
    var questions = document.getElementsByClassName("questionholder");
    var showRequired = document.getElementById("requiredMessage");
    console.log("a = " + a + " and b = " + b);

    if (document.querySelector('input.input' + b) !== null) {
        var currentInput = document.querySelector('input.input' + b).value;
    }


    if (([0,3,4,7].indexOf(b) !== -1)) {    // Enter in [] all question # that should be IGNORED. question0 = 0, question1 = 1, etc         
        console.log("path 1");
            showRequired.style.display = "none";        

            for(var i=0; i < questions.length; i++) {           
                questions[i].style.display = "none";    
            }

            var nextQuestion = document.getElementById("question" + a);

            if(nextQuestion !== null) {
                nextQuestion.style.display = "block";
            }           
    } else {                            
        console.log("path 2");

        if (currentInput == '') {
            showRequired.style.display = "block";
        } else {
            showRequired.style.display = "none";        

            for(var i=0; i < questions.length; i++) {           
                questions[i].style.display = "none";    
            }

            var nextQuestion = document.getElementById("question" + a);

            if(nextQuestion !== null) {
                nextQuestion.style.display = "block";
            }
        }
    }       
}

The onclick sends a number corresponding to the next question to be displayed. The function then hides ALL question divs, and displays the div containing the id question# where # = the number sent by the button.

However, the function is also meant to check if the question should be ignored (in other words, it will prevent the Next button from working if an input field is required to be filled. These questions that should be ignored, in other words not requried, appear in the if statement if (([0,3,4,7].indexOf(b) !== -1))) or to display an error message if the div contains an input field that isn't blank.

If the input field isn't blank, the Next button should work.

See the jsfiddle The code only functions if the javascript is in the body content.

So far, I've got this working pretty well, EXCEPT when a question div doesn't contain any inputs at all. In this case: question 4.

You'll notice this question only contains a Yes and No button. Now, this question SHOULD be ignored, as the if statement [0,3,4,7].indexOf(b) !== -1) contains the number 4, corresponding with question4.

The problem is that this only works if the user clicks on the YES button. If the user clicks NO, the error message displays.

How can I fix my code such that both YES and NO are ignored (no error message displays) so that Yes leads to question5, then 6 while No leads to question6 directly as intended?

No jquery please.

Answer 1

My solution so far is this:

function displayquestion(a, ignore){
    var b = a-1;
    var currentInput = '';
    var questions = document.getElementsByClassName("questionholder");
    var showRequired = document.getElementById("requiredMessage");

    if (document.querySelector('input.input' + b) !== null) {
        var currentInput = document.querySelector('input.input' + b).value;
    }

    if (([0,3,4,7].indexOf(b) !== -1)) {    // Enter in [] all question # that should be IGNORED. question0 = 0, question1 = 1, etc         
        console.log("path 1");
        showRequired.style.display = "none";        

        for(var i=0; i < questions.length; i++) {           
            questions[i].style.display = "none";    
        }

        var nextQuestion = document.getElementById("question" + a);

        if(nextQuestion !== null) {
            nextQuestion.style.display = "block";
        }           
    } else if (ignore == 1) {
        console.log("path 2");
        showRequired.style.display = "none";        

        for(var i=0; i < questions.length; i++) {           
            questions[i].style.display = "none";    
        }

        var nextQuestion = document.getElementById("question" + a);

        if(nextQuestion !== null) {
            nextQuestion.style.display = "block";
        }   
    } else if (currentInput == '') {
        console.log("path 3");
        showRequired.style.display = "block";
    } else {
        console.log("path 4");
        showRequired.style.display = "none";        

        for(var i=0; i < questions.length; i++) {           
            questions[i].style.display = "none";    
        }

        var nextQuestion = document.getElementById("question" + a);

        if(nextQuestion !== null) {
            nextQuestion.style.display = "block";
        }
    }       
}

<div id="requiredMessage" style="display:none"><p>This field is required</p></div>

<div class="questionholder" id="question0" style="display:block">
    <a class="text2button" onclick="displayquestion(1)">Start</a>
</div>
<div class="questionholder" id="question1" style="display:none">
    <h5>Surname</h5>
    <input class="input1" name="ln"><br>    
    <a class="text2button" onclick="displayquestion(2)">Next</a>
</div>
<div class="questionholder" id="question2" style="display:none">
    <h5>Given Name</h5>
    <input class="input2" name="gn"><br>
    <a class="text2button" onclick="displayquestion(3)">Next</a>
</div>
<div class="questionholder" id="question3" style="display:none">
    <h5>Relationship Surname</h5>
    <input class="input3" name="REL"><br>
    <a class="text2button" onclick="displayquestion(4)">Next</a>
</div>
<div class="questionholder" id="question4" style="display:none">
    <h5>Are multiple names involved?</h5><br>
    <a class="text2button" onclick="displayquestion(5,1)">Yes</a>
    <a class="text2button" onclick="displayquestion(6,1)">No</a>
</div>
<div class="questionholder" id="question5" style="display:none">
    <h5>What is the second name?</h5>
    <input class="input5" name="secondName"><br>
    <a class="text2button" onclick="displayquestion(6)">Next</a>
</div>
<div class="questionholder" id="question6" style="display:none">
    <h5>What is your fav color?</h5>
    <input class="input6" name="favColor"><br>
    <a class="text2button" onclick="displayquestion(7)">Next</a>
</div>

Answer 2

I have added a property ignoreValidation[true/false] , this will ignore validation and go directly to the required step.

Maybe its not the best solution but its the simplest and a very little modification to your code required

 function displayquestion(a, ignoreValidation){ console.clear(); var b = a-1; var currentInput = ''; var questions = document.getElementsByClassName("questionholder"); var showRequired = document.getElementById("requiredMessage"); console.log("a = " + a + " and b = " + b); if (document.querySelector('input.input' + b) !== null) { var currentInput = document.querySelector('input.input' + b).value; } if (([0,3,4,7].indexOf(b) !== -1) || ignoreValidation) { // Enter in [] all question # that should be IGNORED. question0 = 0, question1 = 1, etc console.log("path 1"); showRequired.style.display = "none"; for(var i=0; i < questions.length; i++) { questions[i].style.display = "none"; } var nextQuestion = document.getElementById("question" + a); if(nextQuestion !== null) { nextQuestion.style.display = "block"; } } else { console.log("path 2"); if (currentInput == '') { showRequired.style.display = "block"; } else { showRequired.style.display = "none"; for(var i=0; i < questions.length; i++) { questions[i].style.display = "none"; } var nextQuestion = document.getElementById("question" + a); if(nextQuestion !== null) { nextQuestion.style.display = "block"; } } } } 

 <div id="requiredMessage" style="display:none"><p>This field is required.</p></div> <div class="questionholder" id="question0" style="display:block"> <a class="text2button" onclick="displayquestion(1)">Start</a> </div> <div class="questionholder" id="question1" style="display:none"> <!-- REQUIRED --> <h5>Surname</h5> <input class="input1" name="ln"><br> <a class="text2button" onclick="displayquestion(2)">Next</a> </div> <div class="questionholder" id="question2" style="display:none"> <h5>Given Name</h5> <input class="input2" name="gn"><br> <a class="text2button" onclick="displayquestion(3)">Next</a> </div> <div class="questionholder" id="question3" style="display:none"> <h5>Relationship Surname</h5> <input class="input3" name="REL"><br> <a class="text2button" onclick="displayquestion(4)">Next</a> </div> <div class="questionholder" id="question4" style="display:none"> <h5>Are multiple names involved?</h5><br> <a class="text2button" onclick="displayquestion(5, true)">Yes</a> <a class="text2button" onclick="displayquestion(6, true)">No</a> </div> <div class="questionholder" id="question5" style="display:none"> <h5>What is the second name?</h5> <input class="input5" name="secondName"><br> <a class="text2button" onclick="displayquestion(6)">Next</a> </div> <div class="questionholder" id="question6" style="display:none"> <h5>What is your fav color?</h5> <input class="input6" name="favColor"><br> <a class="text2button" onclick="displayquestion(7)">Next</a> </div>