时间戳

首页 > 解决方案 > 输入已填充时显示 div

jquery - 输入已填充时显示 div

问题描述

如果所有输入都已填充在第一个 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 都已填满，我如何显示下一个字段集？ https://codepen.io/nikolamilovac/pen/Paqvvb

标签： jquery

解决方案

首先创建两个带有 id 的 div（您也可以设置字段集的 id 并在 onchange 函数上简单地显示隐藏，这里我关注 div ）并设置在填充完所有字段后不显示要打开的第二个 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;
        }
    });

希望它会帮助你。

推荐阅读