仅在此表单中使用javascript

我有一个表格，只有在您在字段中输入输入内容后，才会显示下一个问题。我现在的问题是，如何仅使用javascript显示下一个问题。我现在想的是，在每个问题中添加一个div来隐藏它，如果用户输入了一个值并单击了next，那么下一个问题将不会被隐藏。我的问题是，只有使用Javascript才能实现这一点

下面的HTML代码…在刚刚发布的表单2中，将有20个

s，因为代码完全相同，只是标签不同

  <div id="q1">
        <label for="nanme">Full Name</label>
        <input class="input" id="name" name="name" type="text" placeholder="Full Name" value="" onkeyup="disable()">

        <div class="control-group">
          <div class="controls">
            <button id="nxtbtn" name="nxtbtn" disabled onclick="next()">Next</button>
          </div>
        </div>
  </div>

  <div id="q2" style="display:none;">
      <label for="Age">Age</label>
      <input class="input" id="age" name="age" type="text" placeholder="Age" value="">

        <div class="control-group">
          <div class="controls">
            <button id="btnbck" >Back</button>
          </div>
        </div>      
        <div class="control-group">
          <div class="controls">
            <button id="button" >Next</button>
          </div>
        </div>      
  </div>

---

这将帮助您查看我希望如何处理我的表单

您可以添加一个计数变量以了解下一个问题的编号，然后显示并隐藏上一个问题： 例如：

这是回答几个问题的好方法

您可以通过CSS类更改样式

.hide{
  display: none;
}

.show{
  display: block;
}

并根据具体情况在标记中应用此类：

最终Javascript:

var count = 2;
    function disable(){
      document.getElementById('nxtbtn').removeAttribute("disabled");
    }
    function next(){
        document.getElementById('q'+ count).className = "show";
        document.getElementById('q' + (count -1)).className = "hide";
        count ++;
    }

最终HTML：

<div id="q1" class="show">
        <label for="nanme">Full Name</label>
        <input class="input" id="name" name="name" type="text" placeholder="Full Name" value="" onkeyup="disable()">

        <div class="control-group">
          <div class="controls">
            <button id="nxtbtn" name="nxtbtn" disabled onclick="next()">Next</button>
          </div>
        </div>
  </div>

  <div id="q2" class="hide">
      <label for="Age">Age</label>
      <input class="input" id="age" name="age" type="text" placeholder="Age" value="">

        <div class="control-group">
          <div class="controls">
            <button id="btnbck" >Back</button>
          </div>
        </div>      
        <div class="control-group">
          <div class="controls">
            <button id="button" >Next</button>
          </div>
        </div>      
  </div>

全名
下一个
年龄
返回
下一个

隐藏除第一个问题以外的所有问题：

// CSS
.question + .question {
  display: none;
}

当用户单击“下一步”时，隐藏第一个问题，显示下一个问题：

// JS
var step = 1;
$('button').click(function() {
  $('#q' + step++).hide();
  $('#q' + step).show();
});

---

把他们放在一个班里。当输入前一个类时，改变每个连续类的类。如在两个类中。使用css隐藏和显示它们。

// CSS
.question + .question {
  display: none;
}

// JS
var step = 1;
$('button').click(function() {
  $('#q' + step++).hide();
  $('#q' + step).show();
});