jQueryでformを作成してPOST(submit)する

Pocket

既存のコードをあまり変えずにPOSTしたい場合や、そのまま書くとformタグがネストしてしまう時にjQueryだけでPOSTできたら嬉しいかなと思い、その方法を調べてみた。

AjaxではなくformタグでPOSTしてページ遷移するのと同じ状況にしたい。

やり方としてはjQueryオブジェクトでformを作成してbodyへ追加した後、submitメソッドを実行すればそういうフォームが存在するのと同じことになる。

<script type="text/javascript">
function postForm(){
  $('<form/>', {action: 'post.php', method: 'post'})
  .append($('<input/>', {type: 'hidden', name: 'account', value: 'krhitoshi'}))
  .append($('<input/>', {type: 'hidden', name: 'name', value: 'Hitoshi Kurokawa'}))
  .appendTo(document.body)
  .submit();
}
</script>

<button onclick="postForm();">jQueryによるPOST</button>

typeがhiddenであれば、画面上は何も変わらずPOSTできる。

HTMLで書くと内容的には次のようになる。

<form action="post.php" method="post">
<input type="hidden" name="account" value="krhitoshi">
<input type="hidden" name="name" value="Hitoshi Kurokawa">
<input type="submit" value="フォームによるPOST">
</form>

とりあえず、これで実現できることは分かったけど、他に方法ないものだろうか。

関連記事

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です