JavaScriptでの動的フォームフィールドの追加

Question

JSON配列の作成に使用するフォームがあります（参考のためmy previous questionを参照）。

このフォームでは、ボタンをクリックして上記の詳細情報を入力することで、ユーザーは詳細情報を追加することができます。

これらは、その後、下記のと同様に配列に配置されることになる。

<input type="text" name="AdditionalCitizenship[0][CountryOfResidency]"> 
<input type="text" name="AdditionalCitizenship[0][TaxIdentificationNumber]"> 
<input type="text" name="AdditionalCitizenship[1][CountryOfResidency]"> 
<input type="text" name="AdditionalCitizenship[1][TaxIdentificationNumber]"> 

これは私が配列のインデックスをインクリメントすることにより、入力されたユーザと同じくらい多くの詳細をつかむことができるでしょう。

余分なフォームフィールドを追加するためにこのスクリプトを手渡しました。

$(document).ready(function() { 
var max_fields  = 10; //maximum input boxes allowed 
var wrapper   = $(".input_fields_wrap_tel"); //Fields wrapper 
var add_button  = $(".add_field_button_tel"); //Add button ID 

var x = 1; //initlal text box count 
$(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 
    if(x < max_fields){ //max input box allowed 
     x++; //text box increment 
     $(wrapper).append('<div><div class="row"><div class="form-group col-md-4"><label for="AdditionalTelephoneType">Telephone Type</label><input type="text" class="form-control" name="AdditionalTelephoneType[]" ></div><div class="form-group col-md-4"><label for="AdditionalTelephoneDialingCode">Dialing Code</label><input type="text" class="form-control" name="AdditionalTelephoneDialingCode[]"></div><div class="form-group col-md-4"><label for="AdditionalTelephoneNumber">Telephone Number</label><input type="text" class="form-control" name="AdditionalTelephoneNumber[]" ></div></div><a href="#" class="remove_field">Remove</a></div>'); //add input box 


    } 
}); 

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

私はとして使用しようとしていますがあるが、機能を爆破するようだと、このシナリオでは、作成されたHTML内のxをインクリメントすることは困難です。

私はそうのようなより多くの反復的にHTMLを作成することができます。

まず、のようなラッパーとしてDIV構造を作成します。

var html = "<div></div>"

が続いて呼び出され、この変数への入力を追加input

var input = document.createElement("input"); 
input.type = "text"; 
input.name = "AdditionalTelephoneType[" + x"]"; 

...そして、私が作成した変数でwrapper.appendを使ってHTMLブロック全体を挿入してください。prev私は？

Answer 1

あなたはコメントを参照して、動的に最高xを見つけることができます。

$("#add").on("click", function() { 
 
    // Get the containing form 
 
    var form = $(this).closest("form"); 
 
    // Get all the AdditionalCitizenship fields from it using ^=, see 
 
    // https://www.w3.org/TR/css3-selectors/#attribute-substrings 
 
    var fields = form.find("input[name^=AdditionalCitizenship]"); 
 
    // Find the one with the highest [x] 
 
    var x = fields.get().reduce((x, element) => { 
 
    var thisx = element.name.match(/AdditionalCitizenship\[(\d+)\]/); 
 
    if (thisx) { 
 
     thisx = +thisx[1]; // The capture group, convert to number 
 
     if (x < thisx) { 
 
     x = thisx; 
 
     } 
 
    } 
 
    return x; 
 
    }, 0); 
 
    // Add one 
 
    ++x; 
 
    // Use x 
 
    console.log("Next x is " + x); 
 
    form.append('<input type="text" name="AdditionalCitizenship[' + x + '][CountryOfResidency]">'); 
 
    form.append('<input type="text" name="AdditionalCitizenship[' + x + '][TaxIdentificationNumber]">'); 
 
});

<form> 
 
    <input type="text" name="AdditionalCitizenship[0][CountryOfResidency]"> 
 
    <input type="text" name="AdditionalCitizenship[0][TaxIdentificationNumber]"> 
 
    <input type="text" name="AdditionalCitizenship[1][CountryOfResidency]"> 
 
    <input type="text" name="AdditionalCitizenship[1][TaxIdentificationNumber]"> 
 
<input type="button" id="add" value="Add"> 
 
</form> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

を