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
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;
}
$datasave = $_POST ;
}
$output = $datasave ;
?>
<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毎に処理を分ける
