LoginSignup
15

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-10-11

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

デモはこちら

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15