Question

以下工作的JS小提琴： https://jsfiddle.net/b63t295x/2/

我有一系列的div，每个div由一个问题，一个输入字段和一个文本按钮组成，该文本链接充当一个按钮，单击该按钮时，将切换当前显示的div并将其替换为该行中的下一个： / p>

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

但是，我希望“下一步”按钮仅在填写输入字段时才起作用（内容无所谓，只是不为空白）。

没有jQuery如何实现？

更新

JSFIDDLE for the following：到目前为止，如果输入为空，它将显示一条错误消息。但是，如果我输入一些内容，它将不会继续进行下一个问题。

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

Answer 1

您可以在输入的next事件处理程序上显示keyup按钮。

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

请参见下面的代码段

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>

Answer 2

已更新所有给定的问题。如果您需要输入，请向其中添加required

干杯！

.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>

如果输入字段包含文本，如何触发功能？

2 个答案: