みなさんこんにちは。
ふじもんです。
今回はとあるWebアプリケーションの案件でハマったことをメモ。
通常htmlやPHP等のボタンで値を送信する場合(formを使って)、
<input type="submit"...>
を記述して送信します。
今回はボタンではなく画像をクリックした時に値を送るので
<input type="image" src="abc.jpg" name="action" value="public" />
といった感じに書き換えました。(どの画像がクリックされたか判断し、GETで送信する処理)
Google Chromeでは通常に値が送信されていたのですが、FireFoxやIEでは値が送信されず、「action.x=7&action.y=12」といった値が送られていて、actionの値はNULLが送られていました。
そこで、inputタグの仕様について調べてみた結果、
“image ： イメージ付き送信ボタン（Src属性値のイメージを表示します。 Alt属性の指定も必須となります。データ送信時はクリック地点に関する情報も送られます。 非視覚系ブラウザにも対応させるため、送信ボタンを複数用意するか、 クライアントサイドイメージマップを利用して下さい）”
http://www.hajimeteno.ne.jp/html40/i/input-image.html
とのことでした。
結局スマートなやり方ではないのですが、
<form name="fuji" method="get" action="fujimonia.php"> <input type="image" src="abc.png" name="public" width="20" height="20"/> <input type="image" src="def.png" name="trash" width="20" height="20"/> </form>
といった感じで「name」属性の名前(送られる値はpublic_xやtrash_x等のため)で判別するようにしました。
ちなみに、submitボタンを画像にするのは数通りのやり方があって、
1. <input type="image"... 2. <button type="submit"... <img src="... </button> 3. <img onclick="document.フォーム名.submit();"...
があるらしいですね。
ちなみに今作っているのはこんな感じのブログに似たポートフォリオシステム。
とりあえず走り書きですが。
以上，徒然なるままに。
ふじもん
[参考文献]
