フォームに複数ボタン並べる
テーブル内に複数のボタンを並べて、押された項目に対してのみ更新処理をしたいのだけど、やりかた忘れた..。ということで色々調べてみた。
を並べるのが一番簡単なんだけど、value属性にボタン名入れるので、name属性が固定できなくなって、サーバ側でパラメタ名が可変になるのでめんどい。
<form> <table style="border: 1px solid black;"> <tr> <td>Kotaro1</td><td><input type="submit" name="user1" value="OK"/></td> </tr> <tr> <td>Kotaro2</td><td><input type="submit" name="user2" value="OK"/></td> </tr> <tr> <td>Kotaro3</td><td><input type="submit" name="user3" value="OK"/></td> </tr> </table> </form>
パラメタ名を固定するためには、javascriptを噛ますのが一般的なやり方(たぶん)
<html> <head> <script type="text/javascript"> function submitHandler(userId) { var form = document.forms["userForm"]; form.userid.value = userId; form.submit(); return 1; } </script> </head> <body> <form name="userForm" method="get"> <table style="border: 1px solid black;"> <tr> <td>Kotaro1</td><td><input type="button" value="OK" onclick="submitHandler(1);"/></td> </tr> <tr> <td>Kotaro2</td><td><input type="button" value="OK" onclick="submitHandler(2);"/></td> </tr> <tr> <td>Kotaro3</td><td><input type="button" value="OK" onclick="submitHandler(3);"/></td> </tr> </table> <input type="hidden" name="userid" value=""> </form> </body> </html>
さて、これもJavaScriptを都度書かなきゃいけないので面倒だ(おぃ)
なんかないかと思って探していたら、
<html> <head> </head> <body> <form name="userForm" method="get"> <table style="border: 1px solid black;"> <tr> <td>Kotaro1</td><td><button type="submit" formmethod="GET" name="userid" value="1">OK</button></td> </tr> <tr> <td>Kotaro2</td><td><button type="submit" formmethod="GET" name="userid" value="2">OK</button></td> </tr> <tr> <td>Kotaro3</td><td><button type="submit" formmethod="GET" name="userid" value="3">OK</button></td> </tr> </table> </form> </body> </html>
シンプルに書けるからこっちのほうがいい気がする。が、ドキュメントを読むと落とし穴が。
http://w3g.jp/xhtml/dic/button
button要素(push button)は汎用ボタンを作成します。input要素でtype属性の値にbutton,submit,resetを指定した場合と同様の働きをします。ただし、空要素のinput要素とは異なり、button要素は内容を含むことができます。包含できる内容はa要素とiframe要素、フォーム関連要素を除く(内包不可能を参照)、テキストや画像などのインライン内容からブロック要素まで何でも内容となります。button要素を使うことで、通常の押しボタンからイメージボタンまで様々なボタンを作成できるので表現力に優れています。
しかしながら、IE6にはbutton要素が複数あると押下したボタンだけでなく、フォーム内に存在するbutton要素のボタンすべてを一斉送信してしまう致命的なバグがあります。自由な表現が可能なbutton要素ですが、残念なことにIE6の利用者が残る現状ではこのバグとの兼ね合いで全く使い物になりません。
IE6 orz いまじゃ使ってる人そんなにいないだろうけど、致命的すぎるので厳しいなぁ。。
まとめ
- やっぱりjavascript使うしかなさそう
- button要素いい!
- IEおわてる
- htmlだけ取ってもまだまだ知らないことだらけ