MW211 EXIT

devlog
HTML/明細の送信
2014年04月17日
┌──────────────────────────────────────┐
│<form method="post" action="">                                              │
│  <table>                                                                   │
│    <thead>                                                                 │
│      <tr>                                                                  │
│        <th>項目1</th>                                                      │
│        <th>項目2</th>                                                      │
│      </tr>                                                                 │
│    </thead>                                                                │
│    <tbody>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" name="col1[]" value="1-a"/></td>             │
│        <td><input type="text" name="col2[]" value="2-a"/></td>             │
│      </tr>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" name="col1[]" value="1-b"/></td>             │
│        <td><input type="text" name="col2[]" value="2-b"/></td>             │
│      </tr>                                                                 │
│    </tbody>                                                                │
│  </table>                                                                  │
│  <input type="submit" value="送信"/>                                       │
│</form>                                                                     │
└──────────────────────────────────────┘
明細をPOSTする場合、name属性を個別に配列にすると、項目ごとの配列となってしまう。
┌──────────────────────────────────────┐
│$_POST['col1'] = array(                                                     │
│    0 => '1-a',                                                             │
│    1 => '1-b',                                                             │
│);                                                                          │
│$_POST['col2'] = array(                                                     │
│    0 => '2-a',                                                             │
│    1 => '2-b',                                                             │
│);                                                                          │
└──────────────────────────────────────┘

データベースからデータを取得したような多次元連想配列にしたい場合には?
┌──────────────────────────────────────┐
│$_POST['data'] = array(                                                     │
│    0 => array(                                                             │
│        'col1' => '1-a',                                                    │
│        'col2' => '2-a',                                                    │
│    ),                                                                      │
│    1 => array(                                                             │
│        'col1' => '1-b',                                                    │
│        'col2' => '2-b',                                                    │
│    ),                                                                      │
│);                                                                          │
└──────────────────────────────────────┘

まず、name属性をつけて直接POSTするのではなく、class属性で束ねて
それらを編集してPOSTする方式に切り替える。
よって、submitボタンではなく、buttonボタンを使用する。
┌──────────────────────────────────────┐
│<form method="post" action="">                                              │
│  <table>                                                                   │
│    <thead>                                                                 │
│      <tr>                                                                  │
│        <th>項目1</th>                                                      │
│        <th>項目2</th>                                                      │
│      </tr>                                                                 │
│    </thead>                                                                │
│    <tbody>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" class="name-col1" value=""/></td>            │
│        <td><input type="text" class="name-col2" value=""/></td>            │
│      </tr>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" class="name-col1" value=""/></td>            │
│        <td><input type="text" class="name-col2" value=""/></td>            │
│      </tr>                                                                 │
│    </tbody>                                                                │
│  </table>                                                                  │
│  <input type="button" id="submit" value="送信"/>                           │
│</form>                                                                     │
└──────────────────────────────────────┘
さて、送信方法だが、二つの案がある。(以下jQueryを使用、PHPで受信を例とする)

【案1】hidden項目で送信する方法
┌──────────────────────────────────────┐
│$('#submit').click(function() {                                             │
│    var index = 0;                                                          │
│    $('tbody tr').each(function() {                                         │
│        $(this).closest('form')                                             │
│            .append($('<input>').prop('type', 'hidden')                     │
│                                .prop('name', 'data[' + index + '][col1]')  │
│                                .val($(this).find('.name-col1').val())      │
│            )                                                               │
│            .append($('<input>').prop('type', 'hidden')                     │
│                                .prop('name', 'data[' + index + '][col2]')  │
│                                .val($(this).find('.name-col2').val())      │
│            );                                                              │
│        index++;                                                            │
│    });                                                                     │
│    $('tbody').closest('form')                                              │
│        .submit();                                                          │
│});                                                                         │
├───┬──────────────────────────────────┤
│PHP側 │$配列 = $_POST['data'];                                             │
└───┴──────────────────────────────────┘
  hidden項目を生成して、そこに設定して送信する。
  よって、そのまま使える。

【案2】JSON文字列で送信する方法
┌──────────────────────────────────────┐
│$('#submit').click(function() {                                             │
│    var jsonArray = new Array();                                            │
│    $('tbody tr').each(function() {                                         │
│        jsonArray.push({                                                    │
│            "col1" :$(this).find('.name-col1').val(),                       │
│            "col2" :$(this).find('.name-col2').val()                        │
│        });                                                                 │
│    });                                                                     │
│    $('tbody').closest('form')                                              │
│        .append($('<input>').prop('type', 'hidden')                         │
│                            .prop('name', 'data')                           │
│                            .val(JSON.stringify(jsonArray))                 │
│        )                                                                   │
│        .submit();                                                          │
│});                                                                         │
├───┬──────────────────────────────────┤
│PHP側 │$配列 = json_decode($_POST['data'], TRUE);                          │
└───┴──────────────────────────────────┘
  一旦、連想配列(ハッシュオブジェクト)にしたものを
  「JSON.stringify()」でJSON文字列に変換して、送信する。
  PHP側では「json_decode()」でデコードする必要がある。
  一つの項目として送信するので(変換処理は必要だが)管理がしやすいという利点あり。
分類:JavaScript、HTML