MW211 EXIT

devlog
JavaScript/POSTメソッドとGETメソッドをネストする方法
2011年09月28日
ということで前回(JavaScript/POSTメソッドとGETメソッドを切り替える方法)からの
続き(「怪獣殿下」を彷彿とさせる初の二話構成です)。

今度は、POSTメソッドの中にGETメソッドを入れる方法(をより真剣に検討)。
┌──────────────────────────────────────┐
│<form method="post" action="xxxx.php">                                      │
│  <input type="button" value="GET実行" onclick="submit2()"/>                │
│  <input type="submit" value="POST実行"/>                                   │
│</form>                                                                     │
└──────────────────────────────────────┘
までは(ほぼ)一緒です
#あ、実はsubmit2()の引数が(使わないから)こっそりなくなってる。

さて、JavaScriptの中ですが、こんな感じでどうでしょうか。
┌──────────────────────────────────────┐
│<script type="text/javascript">                                             │
│function submit2() {                                                        │
│  // 念のためこれから作るformを削除しておく(ある時だけ)                     │
│  var oldForm = document.getElementById("newForm");                         │
│  if (oldForm) {                                                            │
│    oldForm.parentNode.removeChild(oldForm);                                │
│  }                                                                         │
│  // 新規formの設定                                                         │
│  var newForm = document.createElement("form");                             │
│  newForm.setAttribute("method", "get");                                    │
│  newForm.setAttribute("action", "oooo.php");                               │
│  newForm.setAttribute("id"    , "newForm");                                │
│  newForm.style.display="none";                                             │
│  // 新規属性の設定  ※いくつでも設定可能(このブロックを繰り返す)           │
│  var newInput = document.createElement("input");                           │
│  newInput.setAttribute("name" ,name属性名);                                │
│  newInput.setAttribute("value",値);                                        │
│  newForm.appendChild(newInput);                                            │
│  // 新規formの作成とsubmit                                                 │
│  document.getElementsByTagName("body")[0].appendChild(newForm);            │
│  newForm.submit();                                                         │
│}                                                                           │
│</script>                                                                   │
└──────────────────────────────────────┘
ま、JavaScriptの中でformの世界を創ってあげる(でsubmitする)感じですね。
これなら、submitボタン(にあたるもの)がどこにあっても文句をいわれません。
ただし、formの中に定義している各属性は(そのままでは)連れてこれないので
ひとつひとつ「setAttribute()」と「appendChild()」で
(ひっぱってきては)作り直してあげる感じでしょうか。
ひっぱってくる部分は、「getElementById(ID).value」とかでできます。

GETメソッドだったら、URIを作ってしまった方がはやいという話もありますね。
ま、これだとPOSTメソッドへの流用も可能です。
分類:JavaScript