CODEWITHSUNDEEP
javascripthtml
Sweepster
Sweepster

Reputation: 1949

How to fire function if input field contains text?

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

Upvotes: 0

Views: 776

Answers (2)

Alexandr
Alexandr

Reputation: 1031

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>

Upvotes: 0

Nimitt Shah
Nimitt Shah

Reputation: 4587

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>

Upvotes: 1

Related Questions