There is a form:

<form method="post" enctype="multipart/form-data" id="myform" class="myform"> <div class="person-list"> <div class="row person-item" id="original-person-item"> <div class="col-md-3"> <div class="form-group control-wrap"> <input type="text" name="actorsOther[0][name]" class="form-control" placeholder="Имя Π½Π° русском" maxlength="200" max="200"> </div> </div> <div class="col-md-3"> <div class="form-group control-wrap"> <input type="text" name="actorsOther[0][nameEng]" class="form-control" placeholder="Имя Π½Π° английском" maxlength="200" max="200"> </div> </div> <div class="col-md-3"> <div class="form-group control-wrap"> <input type="text" name="actorsOther[0][nameOrig]" class="form-control" placeholder="Имя Π½Π° Ρ€ΠΎΠ΄Π½ΠΎΠΌ" maxlength="200" max="200"> </div> </div> <div class="col-md-3"> <div class="form-group control-wrap"> <select class="selectpicker form-control" name="actorsOther[0][profession][]" data-live-search="true" multiple> <option value="1">ΠΎΠ΄ΠΈΠ½</option> <option value="2">Π΄Π²Π°</option> </select> </div> </div> </div> </div> <button type="button" id="addPerson" class="btn btn-danger">Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅</button> <p><button type="submit" class="btn btn-danger" id="submit" onclick="sendform();">Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ</button> </form> <script> function sendform(){ $('#submit').prop('disabled', true); $('#progress').css('display','block'); var formData = new FormData(document.forms.myform); $.ajax({ type: "POST", processData: false, contentType: false, url: "../ajax.php?add", data: formData, success:function(data){ $("#messInfo").html(data); $('#submit').prop('disabled', false); $('#progress').css('display','none'); }, error:function(data){ alert('error'); $('#submit').prop('disabled', false); $('#progress').css('display','none'); } }) } $('#addPerson').click(function() { var newVideoItem = $('#original-person-item').clone(); newVideoItem.find('.control-wrap').each(function(index) { var newSelectpicker = $(this).find(".selectpicker"); if (newSelectpicker.length) { $(this).html(newSelectpicker) newSelectpicker.selectpicker(); } }); newVideoItem.appendTo(".person-list"); }); </script>

Button adds new fields. But there is a problem with the array to get data from the form. Please tell me how to change the names of the form fields: [0], [1], [2] ... when adding them (press the button id = "addPerson"). To add a new field when adding a new field:

 actorsOther[0][name] actorsOther[0][nameEng] actorsOther[0][nameOrig] actorsOther[0][profession][]

and already:

 actorsOther[1][name] actorsOther[1][nameEng] actorsOther[1][nameOrig] actorsOther[1][profession][] actorsOther[2][name] actorsOther[2][nameEng] actorsOther[2][nameOrig] actorsOther[2][profession][]

etc.

    1 answer 1

    something like this ?

     var count = 0; $('#submit').prop('disabled', true); $('#progress').css('display','block'); var formData = new FormData(document.forms.myform); $('#addPerson').click(function() { var newVideoItem = $('#original-person-item').clone(); count++; newVideoItem.find("[name='actorsOther[0][name]']").attr('name', 'actorsOther['+count+'][name]'); newVideoItem.find("[name='actorsOther[0][nameEng]']").attr('name', 'actorsOther['+count+'][nameEng]'); newVideoItem.find("[name='actorsOther[0][nameOrig]']").attr('name', 'actorsOther['+count+'][nameOrig]'); newVideoItem.find("[name='actorsOther[0][profession][]']").attr('name', 'actorsOther['+count+'][profession]'); newVideoItem.find('.control-wrap').each(function(index) { var newSelectpicker = $(this).find(".selectpicker"); if (newSelectpicker.length) { $(this).html(newSelectpicker) //newSelectpicker.selectpicker(); } }); newVideoItem.appendTo(".person-list"); });