jQueryで動的に行を追加し、POSTする

フロントだけではなく、管理画面においても動的にフォームの行を追加して処理をする事が増えてきたように思います。
行の追加はjQueryを使用しています。
簡単に記述していますので、実際に使用する場合はXSS対策を行って下さい。

HTML

<form method="post">
<table>
  <thead>
    <tr>
      <th>果物</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="fluit[0]" value="りんご"></td>
      <td><input type="number" name="quantity[0]" value="3"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><button id="add_row" type="button">行追加</button></td>
    </tr>
  </tfoot>
</table>
<input type="hidden" name="row_length" value="1">
<input type="submit" name="send" value="送信">
</form>

jQuery

tbodyの最終行にテンプレートを追加、その後配列処理が出来るようにname属性を変更。
あとphpで処理を楽にするために行数を書き換えます。

$(document).on('click', '#add_row', function(e) {
  var tr_row = '' +
  '<tr>' +
    '<td><input type="text" name="fluit" value=""></td>' +
    '<td><input type="number" name="quantity" value=""></td>' +
  '</tr>';// 挿入する行のテンプレート
  var row_cnt = $("table tbody").children().length;// 現在のDOMで表示されているtrの数
  $(':hidden[name="row_length"]').val(parseInt(row_cnt) + 1);// input type=hiddenに格納されている行数を変更
  $(tr_row).appendTo($('table > tbody'));// tbody末尾にテンプレートを挿入
  $('table > tbody > tr:last > td > input').each(function() {
    var base_name = $(this).attr('name');
    $(this).attr('name', base_name + '[' + row_cnt + ']');
  });// input name部分を変更
});

行追加テスト

[行追加]ボタンをクリックするとDOMが以下のように変更されます。

<form method="post">
<table>
  <thead>
    <tr>
      <th>果物</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="fluit[0]" value="りんご"></td>
      <td><input type="number" name="quantity[0]" value="3"></td>
    </tr>
    <tr>
      <td><input type="text" name="fluit[1]" value=""></td>
      <td><input type="number" name="quantity[1]" value=""></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><button id="add_row" type="button">行追加</button></td>
    </tr>
  </tfoot>
</table>
<input type="hidden" name="row_length" value="2">
<input type="submit" name="send" value="　送信　">
</form>

POST結果

var_dump($_POST);

array(4)
{
  ["fluit"]=> array(2)
    {
      [0]=> string(9) "りんご"
      [1]=> string(0) ""
    }
  ["quantity"]=> array(2)
    {
      [0]=> string(1) "3"
      [1]=> string(0) ""
    }
  ["row_length"]=> string(1) "2"
  ["send"]=> string(12) "送信"
}

php整形

このままだと微妙に処理しにくいので。

if(isset($_POST["send"]))
{
  $count = $_POST['row_length'];
  for($i=0; $i<$count; $i++)
  {
    $result[$i]['fluit'] = $_POST['fluit'][$i];
    $result[$i]['quantity'] = $_POST['quantity'][$i];
  }
  echo print_r($result, true);
}

Array
(
  [0] => Array
    (
      [fluit] => りんご
      [quantity] => 3
    )
  [1] => Array
    (
      [fluit] =>
      [quantity] =>
    )
) 

デモはこちら