• このエントリーをはてなブックマークに追加

はじめに

何を今さら,ではありますが,個人的に今までほとんど使ったことがなく,そして使ってみたところちょっとハマりかけたので,メモとして残しておくことにします.

問題のコード

1
2
3
4
5
<form action="..." method="post">
  ...
  <input type="image" name="submit_image1" value="画像なボタン1" src="..." alt="画像なボタン1" />
  <input type="image" name="submit_image2" value="画像なボタン2" src="..." alt="画像なボタン2" />
</form>

複数の画像なボタン(?)でそれぞれ独立した動作をさせたい場合,type="submit" のときと同様と考え,サーバ側では次のように書きました.

1
2
3
4
5
6
7
8
my $FORM = ...;  # クエリパラメータのハッシュリファレンス
 
if( defined $FORM->{submit_image1} ) {
  # 「画像なボタン1」押下時の処理
}
elsif( defined $FORM->{submit_image2} ) {
  # 「画像なボタン2」押下時の処理
}

しかし,これだと IE6 や IE7 (以下,IE) で意図したとおりに動いてくれませんでした.

IE と <input type=”image” />

この件でググってみたところ,IEでは,type="image" によるフォーム送信時,クエリパラメータ(?)に name=value のペアが含まれないらしいことがわかりました.

そこで,「画像なボタン1」を押下したときの $FORM の中身を覗いてみることにします.

1
2
3
use Data::Dumper;
my $FORM = ...;  # クエリパラメータのハッシュリファレンス
print Dumper $FORM;

きちんと動作する Firefox では...

$VAR1 = {
          'submit_image1.x'  => '0',
          'submit_image1.y'  => '0',
          'submit_image1'    => '画像なボタン1',
        };

きちんと動作しない IE では...

$VAR1 = {
          'submit_image1.x' => '44',
          'submit_image1.y' => '24',
        };

といった結果が得られました.IE の場合 $FORM->{submit_image1} がありませんね.

さらに,submit_image1.xsubmit_image2.y なるパラメータもついてきました.

The submitted data includes name.x=x-value and name.y=y-value where “name” is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

17.4.1 Control types created with INPUT – Forms in HTML documents
via <input type=”image”> – 麦酒堂

なるほど.type="image" の場合には,画像のどこがクリックされたかも送信されるんですね.これは便利かもです.

対策

クリック位置の情報はどちらの場合にも送信されることから,これを判別条件に含めるとよさげです.

1
2
3
4
5
6
7
8
my $FORM = ...;  # クエリパラメータのハッシュリファレンス
 
if( defined $FORM->{submit_image1} || defined $FORM->{'submit_image2.x'} ) {
  # 「画像なボタン1」押下時の処理
}
elsif( defined $FORM->{submit_image2} || defined $FORM->{'submit_image2.x'} ) {
  # 「画像なボタン2」押下時の処理
}

判別条件は

if( defined $FORM->{'submit_image1.x'} ) {...}

な感じでいいんじゃね? とも思いましたが,先の場合,type="submit" とかに変更があった場合にもそのまま使えるね,と言い訳できたりできなかったり.

おわりに

<input type="image" /> の落とし穴を ,今さらですが 1つ知ることができました.

ググっている最中に見つかった

とかにも気をつけたいところです.(ちょっと情報古いけど ><)