Dynamicallはフォームに2つのフォームファイルを追加します

Question

私のフォームにfisrstの名前と姓のフィールドを動的に追加します。 Currenltly私は1つのフィールドを追加することができました。一度に2つのフィールドを追加するにはどうすればいいですか？

Ex: fname lastname 
    fname lastname (X remove) 
    fname lastname (X remove) 
    (+ add) 

私のコード

HTMLは以下

は私のhtmlコードのSerで

<div class="input_fields_wrap"> 
    <div><input type="text" name="mytext[]"></div> 
    // I want to add another field with this 
     </div> 
     <button class="add_field_button">Add More Fields</button> 

JS

$(document).ready(function() { 
    var max_fields  = 20; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); 
    var add_button  = $(".add_field_button"); 

    var x = 1; 
    $(add_button).click(function(e){ 
     e.preventDefault(); 
     if(x < max_fields){ 
      x++; //text box increment 
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){    e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

Answer 1

まあ、これはあなたのために動作します： -

$(document).ready(function() { 
    var max_fields  = 20; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); 
    var add_button  = $(".add_field_button"); 
    var fname_lname = '<div>First Name:- <input type="text" name="fname"/>Last Name:- <input type="text" name="fname"/><a href="#" class="remove_field">Remove</a></div>' 

    var x = 1; 
    $(add_button).click(function(e){ 
     e.preventDefault(); 
     if(x < max_fields){ 
      x++; //text box increment 
      $(wrapper).append(fname_lname); 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){    e.preventDefault(); $(this).parent().remove(); x--; 
    }) 
}); 

チェックアウトフィドルを https://jsfiddle.net/dhruv1992/em1je2cu/

Answer 2

だから最初、私はあなたのJavaScriptからハードコードされたHTMLを削除。次に、それをHIDDENテンプレート要素に移動し、内部HTMLをテンプレート要素としてロードしました。これを行うことで、必要な要素をいくつでも作成できます。

$(document).ready(function() { 
 
     var max_fields = 20; //maximum input boxes allowed 
 
     var wrapper = $(".input_fields_wrap"); 
 
     var add_button = $(".add_field_button"); 
 

 
     var x = 1; 
 
     $(add_button).click(function(e) { 
 
     // Here, I load the template's HTML 
 
     var myFullTemplate = $(".fields-template").html(); 
 
     '' 
 
     e.preventDefault(); 
 
     if (x < max_fields) { 
 
      x++; //text box increment 
 
      $(wrapper).append(myFullTemplate); 
 
     } else { 
 
      $(".add_field_button").hide(); 
 
     } 
 
     }); 
 

 
     $(wrapper).on("click", ".remove_field", function(e) { 
 
      e.preventDefault(); 
 
      $(this).parent('div').remove(); 
 
      x--; 
 
      if ($(".add_field_button").is(":hidden")) { 
 
       $(".add_field_button").show(); 
 
      } 
 
      }) 
 
     });

.fields-template { 
 
    display: none; 
 
} 
 
label { 
 
    font-weight: bolder; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input_fields_wrap"> 
 
    <div> 
 
    <input type="text" name="mytext[]"> 
 
    </div> 
 
    // I want to add another field with this 
 
</div> 
 
<button class="add_field_button">Add More Fields</button> 
 

 
<div class="fields-template"> 
 
    <div> 
 
    <label for="fname">First name:</label> 
 
    <input type="text" name="fname[]" /> 
 
    <label for="lname">Last name:</label> 
 
    <input type="text" name="lname[]" /><a href="#" class="remove_field">Remove</a> 
 
    </div> 
 
</div>

だから、あなたは（フィールドではなく、1の両方を削除します）あなたのコメントで言及何を行うには、単にあなたのニーズに合わせて、あなたのHTMLテンプレートを編集します。また、別の変更：アイテムの最大数に達すると、追加ボタンが非表示になります（削除すると、再び表示されます）。