Edited at

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

More than 3 years have passed since last update.

フロントだけではなく、管理画面においても動的にフォームの行を追加して処理をする事が増えてきたように思います。

行の追加は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] =>
)
)

デモはこちら