Zusätzliche Eingabefelder beim vorherigen Füllen

Question

Ich versuche, zusätzliche Felder hinzuzufügen, wenn mein Benutzer eine Gruppe von Eingaben gefüllt hat. Die Idee ist also, dass, wenn er die letzte Eingabe in dieser Gruppe auffüllt, eine andere Gruppe von Eingaben für die gleiche Art von Elementen unter der bestehenden Gruppe zusammenbricht. Eine Gruppe von Elementen besteht aus drei Eingaben. Nach dem Auffüllen würde eine andere Gruppe von Eingaben darunter erscheinen. Ich werde meinen Code unter präsentieren. Hoffe jemand kann mir helfen!

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

Ich habe versucht, das Anhängen der provider anhängen Klasse auf den neuen Anbieter Klasse

Das ist mein jQuery Skript:

<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

Sie müssen überprüfen leeres Eingabefeld in einem bestimmten div verwenden Sie filter() für das und verwenden Sie jQuery clone(), um das übergeordnete div (Eingabegruppe) zu klonen wenn alle Eingabefelder ausgefüllt sind. Und Sie sollten Änderungsereignis anstelle der Eingabe verwenden, Da die Eingabe hier zu viel ist, wird sie jedes Mal ausgeführt, wenn Sie ein einzelnes Zeichen im Textfeld ändern. Das Ereignis change wird ausgelöst, wenn der Benutzer die Eingabe beendet und der Eingabefokus den Fokus verliert.

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

}); 

Hier ist ein funktionstüchtiges Beispiel

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

Ich hoffe, dass es Ihnen helfen.