2007-11-01

IE における Piece Framework のハマりボタン

ページの中に準備された1つのフォームから、例えばいくつかの別ページへ遷移したり、何らかの処理を実施するため複数ボタンを準備するようなケースがあるかと思いますが、

<button type="submit" name="{__eventNameKey}_next" value="次へ" />次へ</button>
<button type="submit" name="{__eventNameKey}_back" value="戻る" />戻る</button>

なんでもないこのコード、IE では正常に動作しません。

具体的には、「戻る」ボタンを押したにも関わらず、「次へ」ボタンを押したように振舞ってしまいます。これは、フォームへの Submit が実行されると、準備された2つのボタンともにリクエストパラメータとしてPOSTされてしまうためです。ボタンには Piece Framework を制御するためのイベント名が付与されていますが、2つのイベントリクエストが飛んできてしまうため、実行すべきイベントが正しく認識できなくなってしまうのです。

ボタンによるイベントの切り替えを Form への Submit で行う場合は、<button> タグではなく <input type="submit"> で対応するようにしましょう。

<input type="submit" name="{__eventNameKey}_next" value="次へ" />
<input type="submit" name="{__eventNameKey}_back" value="戻る" />