質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.84%

  • PHP

    18670questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    14832questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8069questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • MySQL

    5366questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 126

mari.rinn

score 17

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

print " <table><tr>
<td><div>" .$e_name. "</div></td>
<td><div>" .$cus. "</div></td>
<td><div>
<form action='edit.php' method='POST'>
<input type='hidden' name='ce_id' value='".$cid."'>
<input type='hidden' name='ce_nam' value='".$cus."'>
<input type='hidden' name='ce_enam' value='".$e_name."'>
<input type='hidden' name='ce_body' value='".$code_body."'>
<input type='hidden' name='ce_fnam' value='".$code_name."'>
<a href='javascript:void(0)' class='cedit'>" .$code_name. "</a></form>
</div></td></tr></table>";
$(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;
});
}); 

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

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

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

print " <table><tr>
<td><div>" .$e_name. "</div></td>
<td><div>" .$cus. "</div></td>
<td><div>
<form action='edit.php' method='POST' target='edit" .$cid. "'>
<input type='hidden' name='ce_id' value='".$cid."'>
<input type='hidden' name='ce_nam' value='".$cus."'>
<input type='hidden' name='ce_enam' value='".$e_name."'>
<input type='hidden' name='ce_body' value='".$code_body."'>
<input type='hidden' name='ce_fnam' value='".$code_name."'>
<a href='javascript:void(0)' class='cedit'>" .$code_name. "</a></form>
</div></td></tr></table>";
$(function(){
$("a.cedit").on('click',function(){
 var form = $(this).parent('form');
 var target = form.attr('target');
window.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");
  form.submit();
return false;
}
});
});  
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/06/06 15:53

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

    キャンセル

回答 3

checkベストアンサー

0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
</head>

<body>
    <form action='edit.php' method='POST' target="edit1">
        <input type='hidden' name='ce_id' value='ce_id1'>
        <a href='javascript:void(0)' class='post-link'>Cedit1</a>
    </form>
    <form action='edit.php' method='POST' target="edit2">
        <input type='hidden' name='ce_id' value='ce_id2'>
        <a href='javascript:void(0)' class='post-link'>Cedit2</a>
    </form>
    <form action='edit.php' method='POST' target="edit3">
        <input type='hidden' name='ce_id' value='ce_id3'>
        <a href='javascript:void(0)' class='post-link'>Cedit3</a>
    </form>
    <script>
        $(function () {
            $("a.post-link").on('click', function () {
                var form = $(this).parent('form');
                var target = form.attr('target');
                window.open("about:blank", target, "top=100,left=150,width=500,height=500");
                form.submit();
                return false;
            });
        });
    </script>
</body>

</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/08 16:43

    euledge様

    お忙しい中、本当にご丁寧にわかりやすく、論理的に教えてくださりどうもありがとうございました。
    お陰様で無事に望むように出来ました。

    大変美しい教え方で正直ちょっと感動しました。心より感謝いたします。
    ありがとうございました! もしまた何かありましたらまたよろしくお願いいたします。

    最終的なコードは質問文内に追記させていただきます。ありがとうございました!

    キャンセル

0

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

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

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

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


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


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

  1. form, a 要素の nameやidは書きません。
    なくても特定する方法があるからです。
  2. a要素にはclassを同じ名前のクラスを指定します
    Javascriptで共通したイベント処理を行うためです。
  3. hrefにjavascript:void(0)を書いて動作を無効にします。
    JavascriptでPostするので不要だからです。
<form action='edit.php' method='POST'>
  <input type='hidden' name='ce_id' value='ce_id1'>
  <a href='javascript:void(0)' class='post-link'>Cedit1</a>
</form>
<form action='edit.php' method='POST'>
  <input type='hidden' name='ce_id' value='ce_id2'>
  <a href='javascript:void(0)' class='post-link'>Cedit2</a>
</form>
<form action='edit.php' method='POST'>
  <input type='hidden' name='ce_id' value='ce_id3'>
  <a href='javascript:void(0)' class='post-link'>Cedit3</a>
</form>
// クラス名 'post-link'をもつa要素のonClickを処理します
$("a.post-link").on('click',function(){
  // 別ウインド開く箇所は省略します。

  $(this).parent('form').submit();
  // このthisはイベントを起こした要素を示します。(今回の例ではクリックしたa要素のこと)
  // またこのa要素の親要素の`form`は `$(this).parent('form')` と指定できますので
  // そのフォームをsubmitすればよいことになります。
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/07 12:46

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

    キャンセル

  • 2018/06/07 13:06

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

    キャンセル

  • 2018/06/08 11:57

    お手数をお掛けして申し訳ありません。 以下になります。

    ```jQuery
    $(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と言語を記載してしまっていたので、それを直しております。
    どうぞよろしくお願いいたします。

    キャンセル

  • 2018/06/08 13:12

    2点 修正する点があります。

    window.open()の第2引数で targetとなる名前を edit としていますが、フォームごとに別の名前にする必要があります。

    $(this).parent('form').target の記述ですが、 $(this).parent('form')はjqueryのオブジェクトなので
    $(this).parent('form').attr('target','edit'); のような記述方法になります。
    これらに関しては htmlの<form>タグに書いてあれば再設定する必要はないのではないでしょうか?

    上記反映したもの長くなるので回答欄に記載します。

    キャンセル

0

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

print " <table><tr>
<td><div>" .$e_name. "</div></td>
<td><div>" .$cus. "</div></td>
<td><div>
<form action='edit.php' method='POST' target='edit" .$cid. "'>
<input type='hidden' name='ce_id' value='".$cid."'>
<input type='hidden' name='ce_nam' value='".$cus."'>
<input type='hidden' name='ce_enam' value='".$e_name."'>
<input type='hidden' name='ce_body' value='".$code_body."'>
<input type='hidden' name='ce_fnam' value='".$code_name."'>
<a href='javascript:void(0)' class='cedit'>" .$code_name. "</a></form>
</div></td></tr></table>";
$(function(){
$("a.cedit").on('click',function(){
 var form = $(this).parent('form');
 var target = form.attr('target');
window.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");
  form.submit();
return false;
}
});
});  

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    18670questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    14832questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8069questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • MySQL

    5366questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。