填写上一个时的附加输入字段

Question

我正在尝试添加其他字段，以防我的用户填写了一组输入。所以这个想法是，当他完成填写该组中的最后一个输入时，另一组输入用于现有项目 collapses/appears 下的同类项目。一组项目由三个输入组成。填写完那个之后，另一组输入将出现在下面。我将在下面展示我的代码。希望有人能帮助我！

<div class="new-providers">

                        <div class="provider-append" id="toggleExtraProvider">
                            <div class="form-group">
                                <label>Provider</label>
                                <input type="text" class="form-control" id="practiceProvider" placeholder="Full provider name with coredentials" />
                            </div>
                            <div class="form-group">
                                <label>NPI</label>
                                <input type="text" class="form-control" id="providerNPI" placeholder=" NPI" />
                            </div>
                            <div class="form-group">
                                <label>MM #</label>
                                <input type="text" class="form-control" id="providerM" placeholder="M Provider #" />
                            </div>

                            <hr />
                        </div>

</div>

我尝试将 provider-append class 附加到 new-providers class

这是我的jQuery脚本：

<script type="text/javascript">
     $(document).ready(function() {
         $("#toggleExtraProvider div.form-group input").each(function() {
             if($(this).val() =! "") {
                 var target = $("new-providers");
                 target.append(".provider-append");
                 }
         }); 

     });
</script>

Answer 1

您需要检查特定 div 中的空输入框，为此使用 filter() 如果所有输入框都已填满，则使用 jQuery clone() 克隆父级 div（输入组）。并且您应该使用更改事件而不是输入，因为输入在这里会过大它会运行每次当您更改文本框中的单个字符时另一方面更改事件会在用户完成输入和输入框失去焦点时触发.

$(document).ready(function () {

    $(document).on("change",".provider-append input",function(){
        var allHaveText;
        var parentDiv = $(this).closest("div.provider-append");
        emptyInputs=parentDiv.find("input[type=text]").filter(function () {
            return !this.value;
        });                  
        if(emptyInputs.length==0)
        {
            newGroup = parentDiv.clone().appendTo(".new-providers"); 
            newGroup.find("input[type=text]").each(function(){
                $(this).val("");
            });
        }
    });

});

这是一个工作示例

$(document).ready(function () {

    $(document).on("change",".provider-append input",function(){
        var allHaveText;
        var parentDiv = $(this).closest("div.provider-append");
        emptyInputs=parentDiv.find("input[type=text]").filter(function () {
            return !this.value;
        });                  
        if(emptyInputs.length==0)
        {
            newGroup = parentDiv.clone().appendTo(".new-providers"); 
            newGroup.find("input[type=text]").each(function(){
                $(this).val("");
            });
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-providers">

  <div class="provider-append">
    <div class="form-group">
      <label>Provider</label>
      <input type="text" class="form-control" placeholder="Full provider name with coredentials" />
    </div>
    <div class="form-group">
      <label>NPI</label>
      <input type="text" class="form-control" placeholder=" NPI" />
    </div>
    <div class="form-group">
      <label>MM #</label>
      <input type="text" class="form-control" placeholder="M Provider #" />
    </div>

    <hr />
  </div>

</div>

希望对你有所帮助

填写上一个时的附加输入字段

Additional input fields when filling up previous

javascript

jquery

input

append

collapse