右クリック→新しいタブで開く場合、ブラウザはhrefの値しか参照しませんので、POSTを前提としたフォーム送信の実装はできません。
※hrefにjavascriptが記述されている場合には空白ページ(about:blank)になります。
どうしても解決の必要がある場合、以下2つの代案があります。
- フォーム全部品のonchangeを検知して都度全パラメータを乗せたURLを構築し、aタグのhrefに設定する
- 常に新しいウインドウで開くようなaタグを別で用意する(こちらであればPOST可)
それぞれの案の簡単なソースを添付します。
html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="utf-8" />
5 <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
6 <script>
7 $(document).ready(function(){
8 $('.myitem').on('change', change_link);
9 change_link();
10 });
11 function change_link(){
12 let url = $('#myform').attr('action');
13 let parse = '?';
14 $('.myitem').each(function(i, myitem){
15 url += parse + encodeURIComponent($(myitem).attr('name')) + '=' + encodeURIComponent($(myitem).val());
16 parse = '&';
17 });
18 $('#mylink').attr('href', url);
19 }
20 </script>
21</head>
22<body>
23 <h1>リンクテスト</h1>
24 <h2>1.URLをリアルタイムに書き換える</h2>
25 <a id="mylink" href="#">フォーム内容で開く</a>
26 <hr>
27 <h2>2.常に新しいウインドウで開く</h2>
28 <a href="javascript:$('#myform').submit();">同じウインドウで開く</a><br>
29 <a href="javascript:$('#myform').attr('target', '_blank').submit().attr('target', null);">別のウインドウで開く</a><br>
30 <hr>
31 <h2>元フォーム</h2>
32 <form id="myform" method="get" action="https://www.google.co.jp/search">
33 <input class="myitem" type="text" name="q" value="Qiita" />
34 <input class="myitem" type="text" name="safe" value="off" />
35 <button type="submit">送信</button>
36 </form>
37</body>
38</html>