Question

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

<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 类附加到 new-providers 类

这是我的 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 use 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("");
            });
        }
    });

});

这是一个工作样本

＆＃13;

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

＆＃13;

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

＆＃13;

我希望它会对你有所帮助。

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

1 个答案: