submitとimageの挙動の違いについて
twitterの友人のブログ記事を見ていて思い出したこと。
とても良い記事なので是非ご覧あれ。
(長くなっちゃったので、覚悟して読んでね!)
さて本題。
formタグからデータを送信する方法として、一般的に
<input type=”submit” value=”送信” />
とする方法と
<input src=”hoge.gif” type=”image” value=”送信” />
として画像を送信ボタンにする方法がある。
さらにsubmitにはnameタグをつけて、そのデータを取得することが出来る。
例えば。
(※これは乱暴なコードです!決して実際に使おうとか考えないように!)
<form action=”recieve.php” method=”post”>
<input name=”text01″ id=”text01″ type=”text” />
<input id=”submit_id” name=”submit_name” type=”submit” value=”送信” />
</form>
このフォームから送信されたデータはこちら。
array(2) {
[“text01”]=>
string(9) “テスト”
[“submit_name”]=>
string(6) “送信”
}
まぁ、普通ですね。
では次。
フォーム内に複数の送信ボタンがあったらどうでしょう?
面倒なのでついでに画像の送信ボタンも置いてみました。
<form method=”post” action=”recieve.php”>
<input type=”text” name=”text01″ id=”text01″ /><input type=”submit” name=”submit_name” id=”submit_id” value=”送信” />
<input type=”submit” name=”cancel_name” id=”cancel_id” value=”キャンセル” />
<input type=”image” name=”image_name” id=”image_id” value=”送信” src=”hoge.gif” />
</form>
まずは普通の送信ボタンを押したとき。
array(2) {
[“text01”]=>
string(9) “テスト”
[“submit_name”]=>
string(6) “送信”
}
さっきと同じですね。
キャンセルボタンと画像ボタンのデータは来てません。
ではキャンセルボタンを押したとき。
array(2) {
[“text01”]=>
string(9) “テスト”
[“cancel_name”]=>
string(15) “キャンセル”
}
送信ボタンを押したときと同じです。
キャンセルボタンのデータが送信され、送信ボタンと画像ボタンのデータは無視されます。
では最後に画像ボタン。
array(4) {
[“text01”]=>
string(9) “テスト”
[“image_name_x”]=>
string(2) “31”
[“image_name_y”]=>
string(1) “5”
[“image_name”]=>
string(6) “送信”
}
画像ボタンではクリックした座標の情報も来ますので、上の2つとは送信されるデータが違うわけです。
ご存知の方も多いと思いますが。
さて、この画像での送信ボタン。
問題になるのはどういう時か。
<form method=”post” action=”recieve.php”>
<input type=”text” name=”text01″ /><input type=”image” name=”trg_ok” value=”送信” src=”hoge.gif” />
<input type=”submit” name=”trg_cancel” value=”キャンセル” />
</form>
画像の送信ボタンとsubmitのキャンセルボタンを配置しました。
ここまでは問題ないのですが、受取側のプログラムが次のようになっていたとしましょう。
# POSTデータ受取し、キーの名前の変数に値を入れる
foreach( $_POST as $k => $v ){
if( strpos($k,”trg”)===FALSE ){
$k = $v;
}else{
$trg = explode(“_”,$k);
$trg_val = $v;
}
}switch( $trg[1] ){
case “ok”:echo $trg_val ;break;
case “cancel”:echo $trg_val ;break;
}
(この処理自体あまりやらないかもしれませんが。。)
Firefoxで画像送信ボタンを押した場合、「送信」と表示されます。
問題は例によってIE6/7の場合。
IE6/7の環境下では座標の数字が表示されてしまうのです。
フォームから送信されたデータを見てみると、
<Firefoxの場合>
array(4) {
[“text01”]=>
string(9) “テスト”
[“trg_ok_x”]=>
string(2) “21”
[“trg_ok_y”]=>
string(2) “10”
[“trg_ok”]=>
string(6) “送信”
}
これに対して、
<IE6/7の場合>
array(3) {
[“text01”]=>
string(4) “test”
[“trg_ok_x”]=>
string(2) “45”
[“trg_ok_y”]=>
string(1) “7”
}
「 [“trg_ok”] =>”送信” 」の組合せがどっか行ってしまいました。
しかもimageではなく、submitではちゃんと送信されてるから性質が悪い。
あな恐ろしや。
自分が昔ハマッたバグのお話でした。
こういう処理をするときには是非ご注意を。
“submitとimageの挙動の違いについて” に対して1件のコメントがあります。
コメントは受け付けていません。