2,392 views
この記事は最終更新から 1784日 が経過しています。
1. やりたいこと
一つの入力フォームに、複数の submitボタンを置きたいときがしばしばある。
入力パラメーターの nameや valueで判別すればよいのだが、
以下のように、[編集]ボタンを列挙したいケースでちょっと迷ったので備忘録。
ちなみに…
初めてこれが必要な場面に遭遇した時には、
すべての submitを独立させるために、それぞれを formで囲む
という強引な方法で実装した。
radioで選択して submitさせればよいのでは？
と思うかもしれないが、ひと手間増えて 2アクションになるので、操作感が悪化すると感じてしまう。
2. やってみる
方法1 : name属性値に識別子を連結する。
1) submitボタンの name属性に、各[編集]対象の物の識別子を連結する。
Edit_{識別子} のようにする。
2) 入力パラメータで value=[編集] の物を探し、その nameから識別子を抽出する。
以下に実装したものを置いた。
https://www.dogrow.net/hp/sample/00105/
index.php
6行目の var_dump はパラメーターを見たかっただけなので、実際の動作には不要な命令だ。
<?php
main();
exit;
function main(){ // 主制御
var_dump($_POST); // パラメーターをダンプして眺めてみる。
$html_add = '';
$ary_key = array_keys($_POST, '編集');
if(count($ary_key) > 0){ // [編集]ボタンが押された？
$key = $ary_key[0];
$id = explode('_', $key)[1];
$html_add = '<p>[編集]ボタン'.$id.'番が押されました。</p>';
}
echo <<< EOM
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
{$html_add}
<form target="" method="post">
<input type="submit" name="Edit_1" value="編集"><br />
<input type="submit" name="Edit_2" value="編集"><br />
<input type="submit" name="Edit_3" value="編集"><br />
<input type="submit" name="Edit_4" value="編集"><br />
<input type="submit" name="Edit_5" value="編集">
</form>
</body>
</html>
EOM;
}
方法2 : name属性値を配列にする。
方法1でもやりたいことを実現できた。
でもなんだか ちょっとダサい…
name属性は配列にできるので、これを利用すればもっとスマートに実現できそうだ。
1) submitボタンの name属性を配列にし、そのインデックスに識別子を使う。
Edit[{識別子}] のようにする。
2) 入力パラメータで name=Edit の物を探し、その配列インデックス値から識別子を取得する。
以下に実装したものを置いた。
https://www.dogrow.net/hp/sample/00105/index2.php
index.php
6行目の var_dump はパラメーターを見たかっただけなので、実際の動作には不要な命令だ。
<?php
main();
exit;
function main(){ // 主制御
var_dump($_POST); // パラメーターをダンプして眺めてみる。
$html_add = '';
if(isset($_POST['Edit'])){ // [編集]ボタンが押された？
$id = key($_POST['Edit']);
$html_add = '<p>[編集]ボタン'.$id.'番が押されました。</p>';
}
echo <<< EOM
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
{$html_add}
<form target="" method="post">
<input type="submit" name="Edit[1]" value="編集"><br />
<input type="submit" name="Edit[2]" value="編集"><br />
<input type="submit" name="Edit[3]" value="編集"><br />
<input type="submit" name="Edit[4]" value="編集"><br />
<input type="submit" name="Edit[5]" value="編集">
</form>
</body>
</html>
EOM;
}
3. 所感
・次回これが必要な場面に遭遇したら、上記の 方法2 を使いたい。