HTMLのformで2次元配列をPOSTする方法

HTML

HTMLのformで2次元配列をPOSTする方法

HTMLのformを使って2次元配列をPOSTする方法は、少し工夫が必要です。
HTMLのform自体は、ネイティブで2次元配列を直接扱うことはできませんが、フォームの要素を適切に設定することで、2次元配列のデータをサーバーに送信できます。
以下の方法で、2次元配列のデータをPOSTすることができます。

1. HTMLとJavaScriptを使ってフォームを構築する

まず、HTMLでフォームを作成し、JavaScriptで2次元配列のデータを動的に追加します。
ここでは、例として2次元配列をフォーム内に動的に追加する方法を説明します。

HTMLファイル (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2次元配列のPOST</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form id="data-form" action="submit.php" method="POST">
    <div id="matrix-container"></div>
    <button type="button" onclick="addRow()">行を追加</button>
    <button type="submit">送信</button>
  </form>

  <script src="script.js"></script>
</body>
</html>
JavaScriptファイル (script.js)
document.addEventListener('DOMContentLoaded', () => {
  const matrixContainer = document.getElementById('matrix-container');

  // 例として初期の2次元配列
  const matrix = [
    ['cell1', 'cell2'],
    ['cell3', 'cell4']
  ];

  function renderMatrix() {
    matrixContainer.innerHTML = ''; // コンテナをクリア
    matrix.forEach((row, rowIndex) => {
      const rowDiv = document.createElement('div');
      row.forEach((cell, colIndex) => {
        const input = document.createElement('input');
        input.type = 'text';
        input.name = `matrix[${rowIndex}][${colIndex}]`;
        input.value = cell;
        rowDiv.appendChild(input);
      });
      matrixContainer.appendChild(rowDiv);
    });
  }

  function addRow() {
    const newRow = ['']; // 新しい行に空のセルを追加
    matrix.push(newRow);
    renderMatrix();
  }

  renderMatrix(); // 初期表示
});

2. サーバーサイドでの処理

サーバーサイドでは、POSTリクエストのデータを適切に処理するために、受け取ったデータを解析します。
例えば、PHPでデータを処理する例は以下の通りです。

PHPファイル (submit.php)
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // POSTデータを取得
  $matrix = $_POST['matrix'];

  // 2次元配列を表示
  echo '<pre>';
  print_r($matrix);
  echo '</pre>';
}
?>

3. CSSファイル (styles.css)

基本的なスタイリングを適用するためのCSSも追加できます。

#matrix-container {
  margin-bottom: 10px;
}

#matrix-container div {
  margin-bottom: 5px;
}

#matrix-container input {
  margin-right: 5px;
}

この方法では、JavaScriptを使って動的にHTMLのformに2次元配列の要素を追加し、送信時にはサーバーサイドでそのデータを受け取ることができます。
フォームの各入力フィールドには適切なname属性を設定することで、サーバーサイドで2次元配列として処理することが可能になります。