實現動態HTML表單的最簡潔方法是什麼？

Question

我想製作一個HTML表單，用戶可以一次編輯一組元素。用戶必須能夠刪除元素，編輯元素並添加新元素。我使用PHP（Laravel）作爲後端，jQuery用於動態表單。

我最初的想法是做基本上是這樣的：

<form id="bars"> 
    @foreach($foo as $bar) 
     <input type="text" name="name[]" value="{{$bar->name}}" required> 
     <input type="color" name="color[]" value="{{$bar->color}}" required> 
     <input type="checkbox" name="completed[]"{{$bar->completed ? ' checked' : ''}}> 
     <span class="deleteRow"></span> 
    @endforeach 
</form> 

<div id="template" style="display:none;"> 
     <input type="text" name="name[]" required> 
     <input type="color" name="color[]" required> 
     <input type="checkbox" name="completed[]"{{$bar->completed ? ' checked' : ''}}> 
     <span class="deleteRow"></span> 
</div> 

<script> 
    $(document).ready(function() { 
    // Remove rows 
     $('form').on('click', '.deleteRow', function() { 
      $(this).closest('tr').remove(); 
     }); 

     // Clone new rows from template 
     $('#addRow').click(function() { 
      $('#template tr') 
       .clone() 
       .appendTo('#bars'); 
     }); 
    }); 
</script> 

這是我已經刪除了所有無關的代碼和造型刀片模板。此方法使用以下概念：

• []在輸入名稱中，以便將POST數據放入數組中。在處理過程中，我最終得到三個數組name,color和completed，它們將包含已發佈的數據。
• 現有的元件用刀片模板
• 新行從一個「形式模板」克隆，並添加到形式，當用戶點擊了「新行」按鈕服務器端呈現的形式。

這很簡單，並且在大多數情況下都可以使用（我之前使用過），但在這種情況下它不起作用，因爲它有一小部分：複選框。未經檢查的複選框將不會被POST，這意味着completed[]數組的大小將比其他數組小，我無法檢查哪些元素具有複選框選中狀態。

現在我可以修改我的JS，以便跟蹤索引並明確插入每個輸入名稱中的索引（所以name[0]，name[1]等），但是這種方法由於表單必須預填充數據並且不會空出。

我可以不用通過刀片模板來填充數據，而是讓JS處理（通過JSON API），但也會變得很複雜，因爲JS現在必須「解析」表單模板並填寫所有的價值。

以乾淨的方式完成此操作的最佳做​​法是什麼？

Answer 1

我最終得到的是以下幾點：（！所以感謝）

<form id="bars"> 
    @foreach($foo as $i => $bar) 
     <input type="hidden" name="id[{{$i}}]" value="{{$status->id}}"> 
     <input type="text" class="form-control" name="name[{{$i}}]" value="{{$status->name}}" required> 
     <input type="color" name="color[{{$i}}]" value="{{$bar->color}}" required> 
     <input type="checkbox" name="completed[{{$i}}]"{{$bar->completed ? ' checked' : ''}}> 
     <span class="deleteRow"></span> 
    @endforeach 
</form> 

<div id="template" style="display:none;"> 
     <input type="text" name="name[$i]" required> 
     <input type="color" name="color[$i]" required> 
     <input type="checkbox" name="completed[$i]"{{$bar->completed ? ' checked' : ''}}> 
     <span class="deleteRow"></span> 
</div> 

<script> 
    $(document).ready(function() { 
    // Remove rows 
     $('form').on('click', '.deleteRow', function() { 
      $(this).closest('tr').remove(); 
     }); 

     // Clone new rows from template 
     $('#addRow').click(function() { 
      $('#template tr') 
       .clone() 
       .html(function(i, oldHTML) { 
        return oldHTML.replace(/\$i/g, $('#bars tr').length); 
       }) 
       .appendTo('#bars'); 
     }); 
    }); 
</script> 

這主要是什麼@MagnusEriksson建議我做但不必保留一個計數器在一個稍微更清潔的方式解決，但只需使用表格內的行數作爲克隆行的索引即可。