window openでPOST送信する際の処理について

mySQLから取り出したデータ（データがあるだけリスト表示）にリンクを貼って、そのリンクをクリックすると別ウインドウが開き、同時に、hiddenでPOST送信したデータもそこに送信されるようにしたいです。

php
1print " <table><tr>
2<td><div>" .$e_name. "</div></td>
3<td><div>" .$cus. "</div></td>
4<td><div>
5<form action='edit.php' method='POST'>
6<input type='hidden' name='ce_id' value='".$cid."'>
7<input type='hidden' name='ce_nam' value='".$cus."'>
8<input type='hidden' name='ce_enam' value='".$e_name."'>
9<input type='hidden' name='ce_body' value='".$code_body."'>
10<input type='hidden' name='ce_fnam' value='".$code_name."'>
11<a href='javascript:void(0)' class='cedit'>" .$code_name. "</a></form>
12</div></td></tr></table>";
13

jQuery
1$(function(){
2$("a.cedit").on('click',function(){
3window.open("about:blank","edit","top=100,left=150,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1");
4$(this).parent('form').target = "edit";
5$(this).parent('form').action = "code_edit.php";  
6$(this).parent('form').method = "post";
7$(this).parent('form').submit();
8return false;
9});
10});

これで、リスト表示部分のデータが１件だけの場合は問題なく別ウインドウが表示される（POST送信したものも問題なく処理されている）のですが、
２件以上になった場合、一番最新のものだけが、blankの別ウインドウが立ち上がり、それ以降のものはクリックしても何も反応がありません。

これを各データに対して同じように正しく行うにはどうしたらよいでしょうか？
よろしくお願いいたします。

【追記】
ご回答いただいた方法でうまく出来ましたので最終的なコードを一応記載しておきます。

PHP
1print " <table><tr>
2<td><div>" .$e_name. "</div></td>
3<td><div>" .$cus. "</div></td>
4<td><div>
5<form action='edit.php' method='POST' target='edit" .$cid. "'>
6<input type='hidden' name='ce_id' value='".$cid."'>
7<input type='hidden' name='ce_nam' value='".$cus."'>
8<input type='hidden' name='ce_enam' value='".$e_name."'>
9<input type='hidden' name='ce_body' value='".$code_body."'>
10<input type='hidden' name='ce_fnam' value='".$code_name."'>
11<a href='javascript:void(0)' class='cedit'>" .$code_name. "</a></form>
12</div></td></tr></table>";

jQuery
1$(function(){
2$("a.cedit").on('click',function(){
3 var form = $(this).parent('form');
4 var target = form.attr('target');
5window.open("about:blank",target,"top=100,left=150,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1");
6  form.submit();
7return false;
8}
9});
10});

m.ts10806

2018/06/06 06:53

「リスト表示部分」のhtml（ブラウザのソース表示から取得されるもの）をご提示ください。

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

回答3件

頂いたご回答で無事にやりたいことが出来ましたので、そのコードを記載しておきます。
（PHPのコードは、while文内のHTML部分です）

PHP
1print " <table><tr>
2<td><div>" .$e_name. "</div></td>
3<td><div>" .$cus. "</div></td>
4<td><div>
5<form action='edit.php' method='POST' target='edit" .$cid. "'>
6<input type='hidden' name='ce_id' value='".$cid."'>
7<input type='hidden' name='ce_nam' value='".$cus."'>
8<input type='hidden' name='ce_enam' value='".$e_name."'>
9<input type='hidden' name='ce_body' value='".$code_body."'>
10<input type='hidden' name='ce_fnam' value='".$code_name."'>
11<a href='javascript:void(0)' class='cedit'>" .$code_name. "</a></form>
12</div></td></tr></table>";

jQuery
1$(function(){
2$("a.cedit").on('click',function(){
3 var form = $(this).parent('form');
4 var target = form.attr('target');
5window.open("about:blank",target,"top=100,left=150,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1");
6  form.submit();
7return false;
8}
9});
10});

投稿2018/06/08 07:36

mari.rinn

総合スコア296

ベストアンサー

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>Document</title>
9    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
10        crossorigin="anonymous"></script>
11</head>
12
13<body>
14    <form action='edit.php' method='POST' target="edit1">
15        <input type='hidden' name='ce_id' value='ce_id1'>
16        <a href='javascript:void(0)' class='post-link'>Cedit1</a>
17    </form>
18    <form action='edit.php' method='POST' target="edit2">
19        <input type='hidden' name='ce_id' value='ce_id2'>
20        <a href='javascript:void(0)' class='post-link'>Cedit2</a>
21    </form>
22    <form action='edit.php' method='POST' target="edit3">
23        <input type='hidden' name='ce_id' value='ce_id3'>
24        <a href='javascript:void(0)' class='post-link'>Cedit3</a>
25    </form>
26    <script>
27        $(function () {
28            $("a.post-link").on('click', function () {
29                var form = $(this).parent('form');
30                var target = form.attr('target');
31                window.open("about:blank", target, "top=100,left=150,width=500,height=500");
32                form.submit();
33                return false;
34            });
35        });
36    </script>
37</body>
38
39</html>

投稿2018/06/08 04:14

euledge

総合スコア2404

mari.rinn

2018/06/08 07:43

euledge様お忙しい中、本当にご丁寧にわかりやすく、論理的に教えてくださりどうもありがとうございました。お陰様で無事に望むように出来ました。大変美しい教え方で正直ちょっと感動しました。心より感謝いたします。ありがとうございました！　もしまた何かありましたらまたよろしくお願いいたします。最終的なコードは質問文内に追記させていただきます。ありがとうございました！

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

下記の formの要素が mari.rinn さんのおっしゃっているデータの1件分だと思います。

html
1<form action='edit.php' method='POST' name='toedit'>
2  <a href='javascript:toedit.submit()' id='cedit'>" .$code_name. "</a>
3</form>

これに対して以下のようなJavascriptでPOSTを行っているわけですが、

js
1$("#cedit").on('click',function(){
2 // 省略
3 document.toedit.submit();
4});

id='cedit'がデータ件数分存在していますし、name='toedit'も重複しているのでどの行に対して実行されたかがわからないためではないでしょうか？

以上を踏まえてコードを書くと以下のようなものになりそうです。

form, a 要素の nameやidは書きません。

なくても特定する方法があるからです。

a要素にはclassを同じ名前のクラスを指定します

Javascriptで共通したイベント処理を行うためです。

hrefにjavascript:void(0)を書いて動作を無効にします。

JavascriptでPostするので不要だからです。

html
1<form action='edit.php' method='POST'>
2  <input type='hidden' name='ce_id' value='ce_id1'>
3  <a href='javascript:void(0)' class='post-link'>Cedit1</a>
4</form>
5<form action='edit.php' method='POST'>
6  <input type='hidden' name='ce_id' value='ce_id2'>
7  <a href='javascript:void(0)' class='post-link'>Cedit2</a>
8</form>
9<form action='edit.php' method='POST'>
10  <input type='hidden' name='ce_id' value='ce_id3'>
11  <a href='javascript:void(0)' class='post-link'>Cedit3</a>
12</form>

js
1// クラス名 'post-link'をもつa要素のonClickを処理します
2$("a.post-link").on('click',function(){
3  // 別ウインド開く箇所は省略します。
4
5  $(this).parent('form').submit();
6  // このthisはイベントを起こした要素を示します。(今回の例ではクリックしたa要素のこと)
7  // またこのa要素の親要素の`form`は `$(this).parent('form')` と指定できますので
8  // そのフォームをsubmitすればよいことになります。
9});

投稿2018/06/06 14:35

euledge

総合スコア2404

mari.rinn

2018/06/07 03:46

euledge様大変ご丁寧にわかりやすく教えてくださりどうもありがとうございます！とてもよく理解出来ました。それで、書いていただいたように行いましたら、複数件あっても個別にサブウインドウが立ち上がりはするのですが、blankになっていて、POST送信されたものは、セルフウインドウに表示されてしまいます。 return false;　を書き忘れていた事に気づいてやってみたのですが（キャッシュもクリアしてリロードしてみましたが）、やはり同じ結果になってしまいました。これの原因がわかりますでしょうか？　度々すみませんがよろしくお願いいたします。

euledge

2018/06/07 04:06

Windowオープンの箇所を先の回答では省略していましたので、変更後のウィンドウが立ち上がるようになったjavascriptのソースを再度提示いただけますでしょうか？

mari.rinn

2018/06/08 02:57

お手数をお掛けして申し訳ありません。　以下になります。 ```ｊQuery $(function(){ $("a.cedit").on('click',function(){ window.open("about:blank","edit","top=100,left=150,width=500,height=500,scrollbars=1,location=0,menubar=0,toolbar=0,status=1,directories=0,resizable=1"); $(this).parent('form').target = "edit"; $(this).parent('form').action = "code_edit.php"; $(this).parent('form').method = "post"; $(this).parent('form').submit(); return false; }); }); ``` それと、質問文内のHTML部分ですが、実際はPHPだったのですが、間違ってHTMLと言語を記載してしまっていたので、それを直しております。どうぞよろしくお願いいたします。

euledge

2018/06/08 04:12

2点修正する点があります。 window.open()の第2引数で targetとなる名前を edit としていますが、フォームごとに別の名前にする必要があります。 $(this).parent('form').target の記述ですが、 $(this).parent('form')はjqueryのオブジェクトなので $(this).parent('form').attr('target','edit'); のような記述方法になります。これらに関しては htmlの<form>タグに書いてあれば再設定する必要はないのではないでしょうか？上記反映したもの長くなるので回答欄に記載します。

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

あなたの回答