aタグの中のonclickのJSを別タブで開く方法

aタグを無効にし、画面遷移をしない状態で、フォームから送信するプログラムです。
「マウスホイール」「crlt+左クリック」ブラウザーの「右クリック→タブを開く」で新しいタブで開きたいのです
左クリック以外で下記の「onclick」のJSを実行する方法は、ありますか？わかる方教えて欲しいです。

onclickを使用せずに、入力されたもので（form[name=detail<?php echo $key;?>]').submit()）を実行しようと下記のURLの解決した方法を参考にしたが「button」でエラーがでてしまい動作しませんでした。
https://teratail.com/questions/13147

元の記述
「マウスホイール」「crlt+左クリック」クリックが効かない
ブラウザーの「右クリック→タブを開く」about:blankと表示される
<a href="javascript:form[name=detail<?php echo $key;?>]').submit()" onclick="$('form[name=detail<?php echo $key;?>]').submit()">

試した記述
「マウスホイール」「crlt+左クリック」同一タブで開ける
ブラウザーの「右クリック→タブを開く」about:blankと表示される
<a href="javascript:void(0)" onclick="$('form[name=detail<?php echo $key;?>]').submit()">

yambejp

2018/03/15 12:39

全体像がみえません、「画面遷移をしない状態で、フォームから送信」のに「新しいタブで開きたい」とは一体どういう状況でしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

右クリック→新しいタブで開く場合、ブラウザは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>