submitとimageの挙動の違いについて

twitterの友人のブログ記事を見ていて思い出したこと。

CSSで検索フォームをカスタマイズ ? vanillate

とても良い記事なので是非ご覧あれ。

（長くなっちゃったので、覚悟して読んでね！）


さて本題。
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) “送信”
}

画像ボタンではクリックした座標の情報も来ますので、上の２つとは送信されるデータが違うわけです。
ご存知の方も多いと思いますが。

さて、この画像での送信ボタン。
問題になるのはどういう時か。

<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ではちゃんと送信されてるから性質が悪い。
あな恐ろしや。

自分が昔ハマッたバグのお話でした。
こういう処理をするときには是非ご注意を。