Question

如果所有输入都填入第一个div

，我想显示下一个div

我设法在父元素

中完成这项工作

<fieldset>
    test fieldset 1
    <form>
        <div class="row active-q">
            test 1
            <input type="text">
        </div>
        <div class="row active-q">
          test 2
          <input type="text">
      </div>
      <div class="row active-q">
          test 3
          <input type="text">
      </div>
  </form>
  <fieldset>
    <fieldset>
      test fieldset 2
      <form>
        <div class="row active-q">
          test 4
          <input type="text">
      </div>
  </form>
</fieldset>



//input check for filled / empty to display another one
$('input[type="text"],input[type="radio"],input[type="checkbox"], select').bind(
    "keyup change", function () {
        // get elements that are empty.
        var empty = $(
            'input[type="text"], input[type="radio"],input[type="checkbox"], select'
        ).map(function (index, el) {
            return !$(el).val().length ? el : null;
        }).get();

        // could also be placed outside of the function
        var number = $(this).closest(".active-q").next();

        // check if there are any empty elements, if there are none, show numbers, else hide number.
        !empty.length ? number.hide() : number.show().css("display", "flex");
    }
);

我的问题是，如果所有active-q都被填充，我如何显示下一个fieldset？ https://codepen.io/nikolamilovac/pen/Paqvvb

Answer 1

首先创建两个带id的div（你也可以设置字段集的id，只需在onchange函数上显示hide，这里我专注于div）并设置display no你想在填充后打开的第二个div所有的领域 -

  <div id="div1">
     <input type="text" id="text1" />
     <input type="text" id="text2" />
 </div> 

 <div id="div2" style="display:none;">
    <input type="text" id="text3" />
    <input type="text" id="text4" />
</div>

然后在你要打开新div的最后一个文本框上创建简单的更改函数，如果所有字段都填充则在更改函数上创建，然后它将显示第二个div，否则它将抛出消息以填充所有字段 -

 $("#text2").change(function(){
    var one=$('#text1').val();
    var two=$('#text2').val();
      if(one!="" && two!="")
        {
          $('#div2').show();
          return true;
        }
     else
        {
          alert('Please fill all the field');
          return false;
        }
    });

希望它会对你有所帮助。

输入填写时显示div

1 个答案: