jQueryでaタグからリンク先にフォームの内容をPOST送信する方法

2019年9月6日

こんにちは。今回は珍しく、苦手のjQueryの記事です。
利用目的は省きますが、色々なシーンで結構使えるのでメモっておこうと思います。

下のコードのような感じでフォーム外にあるリンクをクリックした時に、そのリンク先のページへフォームの内容を送信する方法です。

フォームのactionをリンクURLに書き換えて送信するコード

苦手のJS系の記事とあって言葉少なに進めていきます。

下のコードでaタグをクリックした時にリンク先ページへフォームの内容をPOST送信できます。

コードの解説

あんまり短い記事になってもアレなので。。シンプルなコードですが一応、言葉少なに解説です。

2行目:クリックしたaタグのリンク先を変数pageURLに格納。

3行目:フォームのactionをpageURLに変更。

4行目:送信。

5行目:リンクを無効にしています。最後にこれをやらないと、見た目はページ移動しているので同じですが、色々書き換えた挙句、最後は普通にページ遷移するというつまらない結果になってしまいます。

最後に

こんな感じで、フォームの外部からでも割と簡単に送信先を変えたり送信したりが可能です。

リンクの場合、パラメータを付けてやれば簡単に値が渡せますが、「GETではなく、どうしてもPOSTで!」という場合にも応用できますね。

では、言葉少なでしたが、この辺で。。。

関連のある記事

jQueryのscrollTopなどが勝手にアニメーションしてしまう原因

jQueryのscrollTopなどが勝手にアニメーションしてしまう原因

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages