Дополнительные поля ввода при заполнении предыдущего

Question

Im пытается добавить дополнительные поля в случае, когда мой пользователь заполнил одну группу входов. Таким образом, идея состоит в том, что, когда он заканчивает заполнение последнего ввода в этой группе, другая группа входов для таких же предметов обрушивается/появляется под существующей. Одна группа элементов состоит из трех входов. После заполнения этой опции появится другая группа входов. Я представлю свой код. Надеюсь, кто-нибудь может мне помочь!

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

Я пытался прилагая провайдера добавить класс по к новых-провайдеров класса

Это мой 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() для этого и используйте 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>

Я надеюсь, что это поможет.