MW211 EXIT

devlog
HTML/POSTのサブミットボタンいろいろ
2011年11月12日
基本的なサブミットボタンはこれ。
┌──────────────────────────────────────┐
│<input type="submit" name="command" value="実行"/>                          │
└──────────────────────────────────────┘

ボタンにJavaScriptを付加して、サブミットボタンにするには、
以下の二通りの方法がある。
┌──────────────────────────────────────┐
│<input type="button" onclick="this.form.submit();" value="実行">            │
├──────────────────────────────────────┤
│<input type="button" onclick="submit(this.form);"  value="実行">            │
└──────────────────────────────────────┘
ただし、ボタンなのでvalue値はPOSTパラメータとして渡せない。
つまり、上記二つに「name="command"」を追記しても、
「POST['command']」では値を拾えない。
最初のサブミットのやつだと「POST['command']」は「実行」という値になる。

では、ボタンではなくリンク文字にサブミットを埋め込む場合は?
┌──────────────────────────────────────┐
│<a href="javascript:void(0);" onclick="submit(this.form);">実行</a>         │
└──────────────────────────────────────┘
「javascript:void(0);」によって、リンクを無効にして(飛ばないようにして)、
onclickでさきほどのようにサブミットしてしまう。

ちなみに以下も同じかと思いきや、ダメだった。
┌──────────────────────────────────────┐
│<a href="javascript:void(0);" onclick="this.form.submit();">実行</a>        │
└──────────────────────────────────────┘

------------------------------------
【追記】
「onclick="submit(this.form);"」でも
場所によってうまくいかないことがあった。
formにidをつけて「$('id').submit();」みたいな方が確実なようだ。
※「function $(inId) {return document.getElementById(inId);}」付きでね
------------------------------------

なにもリンクにこだわらなくてもいい、文字をリンクに偽装してしまえばいいのでは
…というのであればこれ(あ、文字色がどうにもならないか)。
┌──────────────────────────────────────┐
│<span style="cursor:pointer;text-decoration:underline;"                       
                                      onclick="submit(this.form);">実行</span>│
└──────────────────────────────────────┘

他にもいろいろあって、他の回でもリンクでサブミットはとりあげているから
そのうちまとめられるといいですね。
分類:HTML