いわぶろ（ろてん）

はじめに

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

問題のコード

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.x，submit_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つ知ることができました．

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

• input type=image で フォームが2回送信される

とかにも気をつけたいところです．（ちょっと情報古いけど ＞＜）

こちらもあわせてどうぞ