sidewalkcafe blog

日々是好日

1つのフォームに複数のボタンを設置して別々の処理をさせる(PHP+javascript)

書物

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毎に処理を分ける