target = "_blank" 「新規ブラウザに飛ばない」

お疲れさまです。
今、趣味でサービスを作っているものなのですが、HTMLでaタグにtarget="_blank"をつけても新規ブラウザにとびません。
おそらくtypeをsubmitにしていることが関係しているのだと思います。
しかし、下画像の参加するボタンを押すと本当に参加しますか？というアラートも出したいです。
アラートを出しながら、新規ブラウザに飛ばすことは可能なのでしょうか？
原因がわかる方がいましたら教えていただけると嬉しいです。
宜しくお願いします。

以下,HTLM

                 <h2><?php print(htmlspecialchars($comtitle,ENT_QUOTES));?></h2>

                    <script>
                        /**
                         *コミュニティの返り値によりフォーム送信
                        */
                        function submitChk () {
                            /* 確認ダイアログ表示 */
                            var enterconf = confirm ( "参加してもよろしいですか？\n\n参加しない場合は[キャンセル]ボタンを押して下さい");
                            /* send_flg が TRUEなら送信、FALSEなら送信しない */
                            return enterconf;
                        }
                    </script> 

                    <form action="" method="POST" id="sweetalert" onsubmit="return submitChk()"><!--コミュニティ参加エリアの開始-->
                        <input type="submit" class="btn btn-success" value="参加する" name="enter" id="enter"><a href="groupchat.php?id=<?php print(htmlspecialchars($_GET['id'], ENT_QUOTES));?>" target="_blank"></a></button>
                    </form>
                </div><!--com_header_middle-->

情報が足りないところがありましたら遠慮なくいってください。

m.ts10806

2019/02/21 01:54

> HTLM 細かいですが「HTML」です。またコードから、PHP利用されているようですし「PHP」タグを入れておいてください。（となると「BootStrap」も要るかも）

yoorwm

2019/02/21 02:05

targetは、formにつけるものでは？

yuu_gt0208

2019/02/21 04:55

yoorwmさんのいった通り、formにtarget="_blank"をつけたら解決しました。ありがとうございました。

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

回答3件

HTMLがおかしいのが1つ。
</button>としているのに<button>の開始タグが無い。
<input>は閉じタグが不要なものです。

また、処理がわけのからない感じになっていますね。

<form>タグで囲う＝サーバーに情報を送信する　ことになります。

また、buttonタグにしたとしてその中にaタグがありhrefが指定されています。
これは何がしたいのでしょうか？

もし「formをサーバーにも送信するし、別タブでgroupchat.phpも開くし」と言うのでしたら結構処理が煩雑になるように思いますし、バラけています。

ただ、見たところform内には何も送信する情報がなさそうですので
「別タブでgroupchat.phpを開きたいだけ」ならformは不要で、
buttonタグだけで良いのではないでしょうか。

その上で、buttonタグのclickイベントでconfirmを出して、confirm結果がtrueのときだけwindow.openでgroupchat.phpを開けば良いのではないでしょうか。
※idは別途data属性などで渡す

下記は例です。

html
1<button type="button" class="btn btn-success group_chat" data-target_id="1">参加する</button>
2<button type="button" class="btn btn-success group_chat" data-target_id="2">参加する</button>

※確認効率化のため単にHTMLで固定値としました。
data-target_idの値は<?php print(htmlspecialchars($_GET['id'], ENT_QUOTES));?>を入れてください。

js
1$(function(){
2    $(".group_chat").on("click",function(){
3        const target_id = $(this).data("target_id");
4        if(window.confirm ( "参加してもよろしいですか？\n\n参加しない場合は[キャンセル]ボタンを押して下さい")){
5            window.open("groupchat.php?id="+target_id);   
6        }
7    });
8});

投稿2019/02/21 02:12

m.ts10806

総合スコア80850

popupブロックにかからない前提で

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(){
3  document.querySelector('#sweetalert').addEventListener('submit',function(e){
4    e.target.querySelector('a').click();
5  });
6});
7</script> 
8
9<form method="POST" id="sweetalert">
10<input type="submit" value="参加する"><a href="hoge.php?id=123" target="_blank"></a>
11</form>
12</div>