Additional input fields when filling up previous

Question

Im trying to add additional fields in case when my user has filled up one group of inputs. So the idea is that when he finishes filling up the last input in that group, another group of inputs for same kind of items collapses/appears under existing one. One group of items consists of three inputs. After filling up that one, another group of inputs would appear under. I will present my code under. Hope someone can help me!

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

I tried appending the provider-append class on to the new-providers class

This is my jQuery script:

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

• R.K.Saini: Do you want to copy the whole div with class "provider-append" ?

Answer 1

You need to check for empty input box in a particular div use filter() for that and use jQuery clone() to clone the parent div (input group) if all input box filled. And you should use change event instead of input, Since input will be overkill here it will run each time when you change a single character in text box on the other hand change event fires when user finish typing and input box loose focus.

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

Here is a working sample

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

I hope it will help you.

• ajax_27: Thanks man!! Never had a question answered in this noble manner.
• R.K.Saini: You are welcome and thanks for the complement bro :)