Как правильно сформировать данные с формы, где есть массив?

Question

[Diversia]

Есть форма:

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

Кнопка добавляет новые поля. Но есть проблема с массивом. Имена полей:

actorsOther[0][name]
actorsOther[0][nameEng]
actorsOther[0][nameOrig]
actorsOther[0][profession][] <-- множественный

Кнопка добавляет те же поля и не учитывается [0] [1] [2]... Соответственно POST будет только с одним значением:

print "<pre> ";
print_r ($_POST['actorsOther']);
print "</pre>";

Array
(
    [0] => Array
        (
            [name] => edd
            [nameEng] => dd
            [nameOrig] => dd
            [profession] => Array
                (
                    [0] => 1
                    [1] => 2
                )

        )
)

Подскажите, как доработать jQUERY/PHP код, чтобы нумеровать поля правильно и обработать правильно форму.

Answer 1

[Diversia]

Добавил в каждое поле класс и изменил имена полей. Получилось как-то не красиво, но работает:

var ni = 1;
	$('#addPerson').click(function() {
		var newVideoItem = $('#original-person-item').clone();
		newVideoItem.find('.control-wrap').each(function(index) {
		var newSelectpicker = $(this).find(".selectpicker");
		newSelectpicker.prop('name', 'actorsOther['+ ni + '][profession][]');
		var personName = $(this).find(".personName");
		personName.prop('name', 'actorsOther['+ ni + '][name]');
		var personNameEng = $(this).find(".personNameEng");
		personNameEng.prop('name', 'actorsOther['+ ni + '][nameEng]');
		var personNameOrig = $(this).find(".personNameOrig");
		personNameOrig.prop('name', 'actorsOther['+ ni + '][nameOrig]');

			if (newSelectpicker.length) {
				$(this).html(newSelectpicker)
				newSelectpicker.selectpicker();
			}
		});
		newVideoItem.appendTo(".person-list");
		ni = ni + 1;
	});

Так поля нумеруются.

Comments

[Diversia]

При это правильно работает bootstrap-select.

Answer 2

[Stalker_RED]

При добавлении новых полей проверяйте максимальный номер, увеличивайте на единицу, и подставляйте в имя поля.

Comments

[Diversia]

Stalker_RED в принципе это понятно, что нужно увеличивать счетчик в именах полей. Но вся сложность в том, как это делать в jQUERY.

[Stalker_RED]

Diversia: Вы спрашиваете как увеличить переменную на единицу или что-то другое имеете в виду?

[Diversia]

Была сложность в изменении в имени номера поля, я писал об этом.

[Stalker_RED]

Diversia: Необязательно добавлять класс, можно искать их и по имени.
Пример
Документация по селекторам

[Diversia]

Stalker_RED: Не получается составить правильный селектор для поиска поля по имени, т.к. имена не простые с кавычками:

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

поэтому добавил класс.