※Web関連のプログラム等を作成の備忘録的なものになります。
今回は任意の数のパラメータを渡す方法です。
方法はいろいろあるかと思いますが、今回紹介する方法はJavaScriptでテーブルの行を増減させ、SUBMITする直前にフォーム部品の名前を変更します。
サンプルソース
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>サンプル</title> <script src="table_smple.js"></script> </head> <body> <form action="table_sample.php" name="SampleForm" method="post" onSubmit="return false;"> <input type="hidden" name="count" id="count_id" value="0"> <table width="100%" cellpadding="3" cellspacing="1" id="table"> <tbody> <tr> <td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="8%">操作</td> <td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目1</td> <td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目2</td> <td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目3</td> <td style="border: 1px solid #cccccc; background-color: #f5deb3;" align="left" width="23%">項目4</td> </tr> <tr> <td style="border: 1px solid #cccccc;" align="left" colspan="5"><input type="button" value="入力欄追加" onclick="insertTable ()"></td> </tr> <tr> <td style="border: 1px solid #cccccc;"><input type='button' value='削除' onclick='deleteTable (getSort(this.parentNode.parentNode));'></td> <td style="border: 1px solid #cccccc;"> <select name='params1_'> <option value="">選択してください</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> </select> </td> <td style="border: 1px solid #cccccc;"><input type='text' value="" name='params2_'></td> <td style="border: 1px solid #cccccc;"><input type='text' value="" name='params3_'></td> <td style="border: 1px solid #cccccc;"><input type='text' value="" name='params4_'></td> </tr> </tbody> </table> <input type="button" value="実行" onclick="setParamsName (); submit ();" /> </form> </body> </html>
「table_smple.js」にはテーブル操作などのソースを記入します
/** * 行追加 */ function insertTable () { var table1 = document.getElementById ("table"); var row = table1.insertRow (2); // 行を追加(見出し、追加ボタンの次の行) var cell0 = row.insertCell (0); // セルを追加 var cell1 = row.insertCell (1); // セルを追加 var cell2 = row.insertCell (2); // セルを追加 var cell3 = row.insertCell (3); // セルを追加 var cell4 = row.insertCell (4); // セルを追加 cell0.setAttribute ("style", "border: 1px solid #cccccc;"); //適当にスタイルを設定 cell1.setAttribute ("style", "border: 1px solid #cccccc;"); //適当にスタイルを設定 cell2.setAttribute ("style", "border: 1px solid #cccccc;"); //適当にスタイルを設定 cell3.setAttribute ("style", "border: 1px solid #cccccc;"); //適当にスタイルを設定 cell4.setAttribute ("style", "border: 1px solid #cccccc;"); //適当にスタイルを設定 //セルに内容を設定 cell0.innerHTML = "<input type='button' value='削除' onclick='deleteTable (getSort(this.parentNode.parentNode));'>"; cell1.innerHTML = "<select name='params1_'>" + "<option value='' > 選択してください </option>" + "<option value='1'>1</option>" + "<option value='2'>2</option>" + "<option value='3'>3</option>" + "<option value='4'>4</option>" + "</select>"; cell2.innerHTML = "<input type='text' value='' name = 'params2_' > "; cell3.innerHTML = "<input type='text' value='' name = 'params3_' > "; cell4.innerHTML = "<input type='text' value='' name = 'params4_' > "; } /** * 入力欄削除 */ function deleteTable (row) { document.getElementById ("table").deleteRow (row); } /** * 順番を調べる */ function getSort (target) { var nodeLists = document.getElementById ("table").childNodes[1].childNodes; var trCount = - 1; for (var i = 0; i < nodeLists.length; i++) { var node = nodeLists.item (i); if (node.tagName == "TR") { trCount++; } if (node == target) { return trCount; } } return 0; } /** * パラメータ名を設定 */ function setParamsName () { // 項目数を設定 var nodeLists = document.getElementById ("table").childNodes[1].childNodes; // 名前を設定 var cnt = 0 - 2; //見出し、追加ボタン分減算 for (var r = 0; r < nodeLists.length; r++) { if (nodeLists.item (r).nodeName != "TR") { continue; } var tdLists = nodeLists.item (r).childNodes; for (var d = 0; d < tdLists.length; d++) { if (tdLists.item (d).nodeName != "TD") { continue; } // 内容を修正 var params = tdLists.item (d).childNodes; for (var p = 0; p < params.length; p++) { var node = params.item (p); if (node.nodeName != "INPUT" && node.nodeName != "TEXTAREA" && node.nodeName != "SELECT") { continue; } if (node.name.lastIndexOf ("_") == node.name.length - 1) { node.name = node.name + cnt; } } } cnt++; } document.getElementById ("count_id").value = cnt; }
「table_sample.php」で上記ソースで入力したパラメータの取得する方法は下記のようになります。(一例)
$count = $_POST ['count']; $params1 = array_fill (0, $count, ""); $params2 = array_fill (0, $count, ""); $params3 = array_fill (0, $count, ""); $params4 = array_fill (0, $count, ""); for ($i = 0; $i < $count; $i++) { $params1 [$i] = $_POST ['$params1_' . $i]; $params2 [$i] = $_POST ['$params2_' . $i]; $params3 [$i] = $_POST ['$params3_' . $i]; $params4 [$i] = $_POST ['$params4_' . $i]; }
要約すると
1.tableの増減の操作はJavascriptで行います。
2.submitをした際に特定の名前(サンプルでは「_」)で終わっているものに通し番号を付け、件数を設定します。
3.PHPにて件数分ループして値を取得します。