jQueryでaタグからリンク先にフォームの内容をPOST送信する方法
2019年9月6日
この記事は最終更新から4年以上経過しています。内容が古くなっている可能性があります。
こんにちは。今回は珍しく、苦手のjQueryの記事です。
利用目的は省きますが、色々なシーンで結構使えるのでメモっておこうと思います。
下のコードのような感じでフォーム外にあるリンクをクリックした時に、そのリンク先のページへフォームの内容を送信する方法です。
|
1 2 3 4 5 6 7 8 |
<form id="○○" action="/example.html" method="post"> <input type="text" name="○○"> <input type="submit" value="送信"> </form> <a href="○○">ページ１へのリンク</a> <a href="○○">ページ２へのリンク</a> <a href="○○">ページ３へのリンク</a> |
～ 目次 ～
フォームのactionをリンクURLに書き換えて送信するコード
苦手のJS系の記事とあって言葉少なに進めていきます。
下のコードでaタグをクリックした時にリンク先ページへフォームの内容をPOST送信できます。
|
1 2 3 4 5 6 |
$('a').on('click', function(){ var pageURL = $(this).attr('href'); $('form').attr('action',pageURL); $('form').submit(); return false; }); |
コードの解説
あんまり短い記事になってもアレなので。。シンプルなコードですが一応、言葉少なに解説です。
２行目：クリックしたaタグのリンク先を変数pageURLに格納。
３行目：フォームのactionをpageURLに変更。
４行目：送信。
５行目：リンクを無効にしています。最後にこれをやらないと、見た目はページ移動しているので同じですが、色々書き換えた挙句、最後は普通にページ遷移するというつまらない結果になってしまいます。
最後に
こんな感じで、フォームの外部からでも割と簡単に送信先を変えたり送信したりが可能です。
リンクの場合、パラメータを付けてやれば簡単に値が渡せますが、「GETではなく、どうしてもPOSTで！」という場合にも応用できますね。
では、言葉少なでしたが、この辺で。。。
