1つのフォームの中に複数のsubmitボタンを設置して、それぞれ違う処理をさせるページを作ろうとしたけれどもけっこう難しかった
目的
jsonデータの内容を表示、編集をフォームで簡単にしたかった
内容
- 4つのグループにそれぞれ3種類の入力フォームを設置(タイトル・文章・URL)
- グループ毎に「編集」「削除」ボタンを設置
- 4グループをまとめて「編集」するボタンを設置
グループ毎の入力フォーム
PHPで複数のボタンを配置したときの処理(forやwhileで設置した複数のボタンを判別)
を参考に
各入力フォームとsubmitのname属性を配列にすることで、それぞれのグループを作る
for($i = 0;$i < 4;$i++){ echo <<<__HTML__ グループ{$i}<br> タイトル<input type="text" name="title[{$i}]" value=""><br> 文章<input type="text" name="text[{$i}]" value=""><br> URL<input type="text" name="url[{$i}]" value=""><br> <br> <input type="submit" name="submit[{$i}]" value="編集"><br> __HTML__; }
あとはkey($_POST['submit'])でボタンの押されたグループを班別して対応する配列を取り出す
$group =key($_POST['submit']); $title = $_POST['title'][$group]; $text = $_POST['text'][$group]; $url = $_POST['url'][$group];
ボタンの種類
FORMで送信ボタンと戻るボタンを2つつけてそれぞれ遷移先を変えたい -- その他（プログラミング・Web制作） | 教えて!goo
を参考に、「編集」「削除」ボタンを実装。ボタン内にonclick処理を追加する
function sendMode(data){ document.getElementById("editmode").value=data; }
//グループ毎に設置 <input type="submit" name="submit[{$i}]" value="編集" onclick="sendMode(1)"><br> <input type="submit" name="submit[{$i}]" value="削除" onclick="sendMode(2)"><br> //グループの外に1つだけ設置 <input type="hidden" id="editmode" name="editmode" value="0">
ボタンクリックでjavascriptを呼び出し、隠しフォームの値を書き換える
submitとonclickの実行タイミングがわからなかったけど、とりあえず動いてるから良しとするｗ
あとは受け取った$_POST["editmode"]の値によって処理を振り分ける
switch ($_POST["editmode"]) {
case 0:
//全体編集処理
break;
case 1:
//グループ編集処理
break;
case 2:
//グループ削除
break;
}
う〜ん、submitのvalue内容で振り分けた方がスマートかな?
完成?
<?php //postなら各種処理 if($_POST){ //分岐処理 switch ($_POST["editmode"]) { case 0: //全体編集処理 echo("全グループを編集しました"); break; case 1: //グループ編集処理 $group =key($_POST['submit']); $title = $_POST['title'][$group]; $text = $_POST['text'][$group]; $url = $_POST['url'][$group]; echo("グループ".$group."を編集しました<br>"); echo("タイトル=".$title."<br>"); echo("文章=".$text."<br>"); echo("URL=".$url); break; case 2: //グループ削除 $group =key($_POST['submit']); $_POST['title'][$group]=""; $_POST['text'][$group]=""; $_POST['url'][$group]=""; echo("グループ".$group."を削除しました"); break; } //保存処理 通常はcase毎に行う $datasave = $_POST ; } //データ呼び出し処理 $output = $datasave ; //html書き出し ?> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <script> function sendMode(data){ document.getElementById("editmode").value=data; } </script> </head> <body> <h2>複数ボタンフォーム</h2> <form method="post" action=""> <hr> <?php //グループ毎のフォーム書き出し for($i = 0;$i < 4;$i++){ echo <<<__HTML__ グループ{$i}<br> タイトル<input type="text" name="title[{$i}]" value="{$output['title'][$i]}"><br> 文章<input type="text" name="text[{$i}]" value="{$output['text'][$i]}"><br> URL<input type="text" name="url[{$i}]" value="{$output['url'][$i]}"><br> <br> <input type="submit" name="submit[{$i}]" value="編集" onclick="sendMode(1)"><br> <input type="submit" name="submit[{$i}]" value="削除" onclick="sendMode(2)"><br> <hr> __HTML__; } //全体編集・隠しフォーム・フッタ ?> <input type="hidden" id="editmode" name="editmode" value="0"> <input type="submit" name="submit" value="全体編集"><br> <hr> </form> </body> </html>
- 削除処理は保存内容を呼び出しunset()を使う
- 保存はcase毎に処理を分ける
