Home> programming > JavaScriptとAタグでSubmitする
JavaScriptとAタグでSubmitする
- November 28, 2005 12:09 AM
- programming
使い古されたネタであって、ajaxなネタとはとても云えないが3回以上ネットで検索した記憶があるため、ここに纏めておくことにする。
まず、そもそも何故Aタグを用いてform内容を送信することになったかというと、
- formのsubmitボタンは普通に配置すると勝手に改行される
- でCSSで<br clear="all" />とかやってformのsubmitを横に並べると、今度は何故かMozilla系ブラウザで少しずつ段ずれを起こす
- submitボタンではCSSで見た目を変えるにも限界がある
- どうせJavaScriptは使うのだから、noscriptな環境は無視して良い
これだけ条件が揃えばもういいでしょう。
ということで早速本題へ。
まずはベタな方法。
aタグhref要素にJavaScriptを仕込む
formのactionに移動先のファイル名、nameにIDを仕込んでおく。methodやenctypeは好みで(POSTだろうけど)。
で、aタグのhref要素にjavascript:ID.submit()を仕込む。
別の方法。
aタグonClick要素にJavaScriptを仕込む
formのactionに移動先のファイル名、nameにIDを仕込んでおく。例によってmethodやenctypeは好みで。
で、aタグのhref要素に#を、onClick要素にID.submit()を仕込む。
#onClickにはjavascript:ID.submit()を仕込んでも良い。
実はここでhref要素を飛ばしても良い。
リンクテキストとして処理されなくなるが、CSSで見た目のアクションを付ければよいので問題ない。
上記いずれの方法でも、aのhref要素での指定に関わらずformのaction要素で指定したリンク先に移動する。
つまりaction要素にURL埋め込みを行えば、GET送信とPOST送信を同時に行える。
(例えばGETで画面遷移指定して、POSTでデータ受け渡しするなど)
汎用的に使用するなら、action要素に#を入れるという手もあるが、リンク先のURL末尾に#が付加されるせいで若干不便だと思う。
因みに画像をsbumitボタン代わりに使用したい場合は、aタグでimgタグを挟み込んであげればよい。
(onClickをimgタグに仕込む手もあります)
Home> programming > JavaScriptとAタグでSubmitする
- Categories
- Archives
- Syndication
Comments:0