Карта динамического массива флажков без индекса

Question

Этот вопрос строится далее на вопрос, заданный здесь: How to map dynamic array of input fields.

У меня есть динамический набор строк, каждый из которых имеет собственные поля ввода. Эти строки могут динамически добавляться в DOM, поэтому я должен использовать входные массивы без индекса (например, имя_файла [] вместо имени поля [1] и т. Д.).

Проблема возникает, когда я использую флажки в этих строках. Поскольку флажки не отправляются, когда они не отмечены, я не вижу способа узнать, какой представлен флажок принадлежит к каким значениям строк.

Пример моей формы:

<form> 
<div class="row"> 
    <input type="text" name="product[]"> 
    <input type="text" name="qty[]"> 
    <input type="checkbox" name="projectline[]"> 
</div> 
<div class="row"> 
    <input type="text" name="product[]"> 
    <input type="text" name="qty[]"> 
    <input type="checkbox" name="projectline[]"> 
</div> 
<div class="row"> 
    <input type="text" name="product[]"> 
    <input type="text" name="qty[]"> 
    <input type="checkbox" name="projectline[]"> 
</div> 
</form> 

Я нашел ответ на аналогичную проблему здесь: php array of checkboxes, но ответ, очевидно, относится только к массивам с индексом.

Какой лучший подход здесь?

EDIT:

Я также проверить форму на наличие ошибок на стороне сервера и перенаправить его обратно, если он неисправен, поэтому я должен быть в состоянии «восстановить» форму на основе представленных значений.

Answer 1

В итоге я назначил индексный номер каждой из строк, генерируя новый случайный идентификатор каждый раз, когда добавляется строка. Я использовал jQuery для функций клонирования и привязки событий.

Ниже мое полное решение.

Это моя оригинальная форма:

<form> 
<div class="row"> 
<input type="text" name="product[0]"> 
<input type="text" name="qty[0]"> 
<input type="checkbox" name="projectline[0]"> 
</div> 
</form> 

У меня есть шаблон строки, которые я использую, чтобы сделать клоны:

<div id="templaterow"> 
<input type="text" name="product[%%index%%]"> 
<input type="text" name="qty[%%index%%]"> 
<input type="checkbox" name="projectline[%%index%%]"> 
</div> 

кнопку, чтобы клонировать строку:

<button id="addrow" value="add new row"/> 

И функция, связанная с кнопкой:

$('#addrow').on('click',function() 
{ 
    //template row is cloned and given the right attributes: 
    var clone = $('#templaterow').clone(true, true); 
    $('.row').last().after(clone); 
    clone.addClass('row').removeAttr('id'); 

    // the %%index%% placeholder is replaced by a random index number between 100 and 9999999 
    clone.html(function (index, html) { 
     var rndIndex = Math.floor((Math.random() * 9999999) + 100); 
     return html.replace(new RegExp('%%index%%','g'),rndIndex); 
    }); 
}); 

Answer 2

Один трюк, который я видел для этого, должен помещать скрытое поле перед каждым флажком, который отправляет одно и то же поле со значением 0. Таким образом, если вы установите флажок, он заменит значение 0 флажком но если вы этого не сделаете, вы получите 0 для непроверенных, а не ничего в своих данных.

Ответ на комментарии, подтверждающий текущее общее количество индексов, также может работать, но немного сложнее в зависимости от того, как и когда DOM может быть изменен.