How to fire function if input field contains text?

Question

Working JS Fiddle of the below: https://jsfiddle.net/b63t295x/2/

I have a series of divs, each consisting of a question, an input field, and a text link that acts as a button that when clicked, will toggle the currently showing div and replace it with the next in the line:

<head>
<script type="text/javascript">
    function displayquestion(a){
    var questions = document.getElementsByClassName("questionholder");
    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"
    }
}
</script>
</head>

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

<form id="TheForm" style="display:block;">
<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 id="required" 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 name="gn"><br>
    <a class="text2button" onclick="displayquestion(3)">Next</a>
</div>
.... and so on 35 times
</form>

HOWEVER, I want the Next button to only function IF the input field is filled in (contents doesn't matter, just not blank).

How can this be achieved without jQuery?

UPDATE

JSFIDDLE for the following: I have gotten so far as this which will display an error message if the input is blank. However, it if I type in something, it won't move on to the next question.

    function displayquestion(a){
    var currentDIV = document.getElementById("question" + a);
    var currentInput = document.querySelector('input').value;
    var questions = document.getElementsByClassName("questionholder");
    var showRequired = document.getElementById("requiredMessage");
    console.log(currentInput == '');    

    if (a == 1){    // Enter here all question # that should be IGNORED. question0 = 1, question1 = 2, etc
            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 == '') {
            showRequired.style.display = "block";
        }
    }       
}

At the start of `displayquestion`, check the text field and `return;` if it's blank. However, you should put those questions into an array and use a single div to display the questions. Also, don't use inline event handling like `onclick="..."` — , Feb 04 '19 at 21:40
"check the text field" <- that's the part I'm asking how to do — Sweepster, Feb 04 '19 at 21:41
Check the "value" property to verify that it's not the empty string — Pointy, Feb 04 '19 at 21:43
Use proper event handling so you have access to the clicked button, then grab the input field based on that. Or disable all buttons from the start, and enable them if the user type something into the field. — , Feb 04 '19 at 21:43
`if (document.querySelectorAll(".questionholder input")[a - 2].value == "") return;` — , Feb 04 '19 at 21:47

Nimitt Shah · Answer 1 · 2019-02-05T00:19:27.100

You can display next button on input's keyup event handler.

document.querySelectorAll(".inputText").forEach(function(inputItem){
  inputItem.addEventListener("keyup", function(event){
    if(event.target.value==""){
      ((event.target).closest("div")).getElementsByTagName("a")[0].style.display = "none";
    }else{
      ((event.target).closest("div")).getElementsByTagName("a")[0].style.display = "block";
    }
  });
});

See the Snippet below:

displayquestion(1);

function displayquestion(a){
    var questions = document.getElementsByClassName("questionholder");
    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";
        nextQuestion.querySelector(".text2button").style.display = "none";
    }
}

document.querySelectorAll(".inputText").forEach(function(inputItem){
  inputItem.addEventListener("keyup", function(event){
    if(event.target.value.trim()==""){
      ((event.target).closest("div")).getElementsByTagName("a")[0].style.display = "none";
    }else{
      ((event.target).closest("div")).getElementsByTagName("a")[0].style.display = "block";
    }
  });
});

<form id="TheForm" style="display:block;">
    <div class="questionholder" id="question1" style="display:none">
        <h5>Requested Surname</h5>
        <input name="ln" class="inputText"><br>   
        <a class="text2button" onclick="displayquestion(2)">Next</a>
    </div>
    <div class="questionholder" id="question2" style="display:none">
        <h5>Given Name</h5>
        <input name="gn" class="inputText"><br>
        <a class="text2button" onclick="displayquestion(3)">Next</a>
    </div>
.... and so on 35 times
</form>

This hides the next button but when I type in an answer, the next button doesn't appear at all and I cannot move forward through the questions — Sweepster, Feb 04 '19 at 22:16
When you type the answer, it should show the next button. Look here https://i.stack.imgur.com/Aiz5w.png — Nimitt Shah, Feb 04 '19 at 22:23
ignoring the logic of this answer, monitoring keyup is the way to go .. — David Bray, Feb 04 '19 at 22:51

Alexandr · Answer 2 · 2019-02-05T15:59:42.070

Updated with all the given questions. If you want the input to be required add required to it

Cheers!

.invalid {
  box-shadow: 0 0 5px red;
}

<head>
  <script type="text/javascript">
    var inputType;

    function displayquestion(a) {

      var thisQuestion = document.getElementById("question" + (a-1));
      var nextQuestion = document.getElementById("question" + a);
      var questionInput = thisQuestion.querySelector('input') || '';
      var inputValue;


      if (inputType == 'button' || !questionInput.required) { //no input or not required
        inputValue = 'button'

      } else if (questionInput && questionInput.type == "text") { //input is text
        inputValue = questionInput.value;
        inputType = 'text';

      } else if (questionInput && questionInput.type == "radio") { //input is radio
        var radioInput = document.querySelector('input[name=' + questionInput.name + ']:checked');
        if (radioInput) inputValue = radioInput.value;
        inputType = 'radio';

      } else { //no input
        inputValue = 'button'
      }


      if (inputValue) {
        //if more the one a tag, input type button
        inputType = '';
        if (nextQuestion && nextQuestion.getElementsByTagName("a").length > 1)
          inputType = 'button';

        //hide all questions
        var questions = document.getElementsByClassName("questionholder");
        for (var i = 0; i < questions.length; i++) {
          questions[i].style.display = "none";
        }

        //show question
        if (nextQuestion) nextQuestion.style.display = "block";

        //remove class invalid
        if (questionInput && questionInput.classList) questionInput.classList.remove("invalid")

      } else { //add invalid
        if (inputType == 'text' && questionInput.required) { //add invalid to text
          if (questionInput && questionInput.classList) questionInput.classList.remove("invalid")
          questionInput.className += " invalid"
        }

        if (inputType == 'radio') { //add invalid to radio
          var radios = document.getElementsByName(questionInput.name)
          for (var i = 0, length = radios.length; i < length; i++){
           if (radios[i].classList) radios[i].classList.remove("invalid");
            radios[i].className += " invalid"
          }
        }
      }
    }

  </script>
</head>

<form id="TheForm" style="display:block;">
  <div class="questionholder" id="question0">
    <a class="text2button" onclick="displayquestion(1)">Start</a>
  </div>
  <div class="questionholder" id="question1" style="display:none">
    <!-- REQUIRED -->
    <h5>Requested Surname</h5>
    <input name="ln" required><br>
    <a class="text2button" onclick="displayquestion(2)">Next</a>
  </div>
  <div class="questionholder" id="question2" style="display:none">
    <!-- NOT REQUIRED -->
    <h5>Given Name</h5>
    <input name="gn"><br>
    <a class="text2button" onclick="displayquestion(3)">Next</a>
  </div>
  <div class="questionholder" id="question3" style="display:none">
    <!-- NOT REQUIRED -->
    <h5>Question 3</h5>
    <input name="gn"><br>
    <a class="text2button" onclick="displayquestion(4)">Next</a>
  </div>
  <div class="questionholder" id="question4" style="display:none">
    <h5>Pick an answer</h5><br>
    <a class="text2button" onclick="displayquestion(5)">Yes</a>
    <!-- GOES TO QUESTION 5 -->
    <a class="text2button" onclick="displayquestion(6)">No</a>
    <!-- GOES TO QUESTION 6 -->
  </div>
  <div class="questionholder multiplechoice" id="question5" style="display:none">
    <!-- REQUIRED -->
    <h5>Multiple choice</h5>
    <input required type="radio" id="birth" name="isPrevRel" value="birth"><label for="birth"><p class="radioChoice">birthday</p></label><br>
    <input required type="radio" id="birthcombo" name="isPrevRel" value="birthcombo"><label for="birthcombo"><p class="radioChoice">birthday and holiday</p></label><br>
    <input required type="radio" id="prev" name="isPrevRel" value="prev"><label for="prev"><p class="radioChoice">In case you didnt notice</p></label><br>
    <input required type="radio" id="combo" name="isPrevRel" value="combo"><label for="combo"><p class="radioChoice">these are radio buttions</p></label><br>
    <input required type="radio" id="other" name="isPrevRel" value="other"><label for="other"><p class="radioChoice">Other</p></label><br>
    <a class="text2button radio" onclick="displayquestion(6)">Next</a>
  </div>
  <div class="questionholder multiplechoice" id="question6" style="display:none">
    <!-- RADIO REQUIRED BUT TEXT INPUT IS NOT -->
    <h5>This one is tricky. one of the two radio buttons must be seleted but the text input is optional</h5>
    <input required type="radio" id="IDQyes" name="IQ" value="yes"><label for="IQyes"><p class="radioChoice">Yes. If you want, enter your name below.</p></label>
    <input required type="radio" id="IDQno" name="IQ" value="no"><label for="IQno"><p class="radioChoice">No</p></label><br>
    <input name="rel"><br>
    <a class="text2button radio" onclick="displayquestion(7)">Next</a>
  </div>

</form>

I'm getting an error: Uncaught TypeError: Cannot read property 'querySelector' of undefined — Sweepster, Feb 04 '19 at 22:04
@Sweepster I have changed it to getElementsByTagName, now it should work — Alexandr, Feb 04 '19 at 22:09
I'm getting Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined. Not all questions have an input field though. Perhaps this is why? — Sweepster, Feb 04 '19 at 22:13
@Sweepster definitely, I have updated the code with a select input. It works if you use `getElementsByClassName` and add class to the select and input tags — Alexandr, Feb 04 '19 at 22:26
I'm still getting Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined. I added the class to the input and everything — Sweepster, Feb 04 '19 at 22:31
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187896/discussion-between-kloshar4o-and-sweepster). — Alexandr, Feb 04 '19 at 22:40

How to fire function if input field contains text?

2 Answers2