入力が完了すると入力フィールドが追加されます。

Question

ユーザーが1つの入力グループを入力した場合に追加フィールドを追加しようとしています。そのアイデアは、そのグループの最後の入力を完了すると、同じ種類のアイテムの別の入力グループが、既存のアイテムの下に折りたたまれて表示されるということです。 1つの項目グループは3つの入力で構成されています。それを埋めると、入力の別のグループが下に表示されます。私は自分のコードを下に提示します。誰かが私を助けることを願っています！

私はこれは私の jQueryのスクリプトです 新プロバイダクラスに

をプロバイダ追加クラスを追加しようとした

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

：

<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（入力グループ）をクローンしますすべての入力ボックスが満たされている場合また、入力の代わりにchangeイベントを使用する必要があります。入力が過剰になるので、テキストボックスの1文字を変更するたびに実行されます。変更イベントはユーザーが入力を完了し、入力ボックスのルーズフォーカスを入力すると発生します。ここで

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

です。