データベースから取り出した値をjavascriptへ渡す方法

Question

実現したいこと

各、テーブルの行ごとにコピーボタンを用意してあり、コピーボタンを押すことによってデータベースの内容をクリップボードへコピーしたいと考えております。

javascriptでクリップボードへ入れることまでは調べられたのですが、
データベースからデータの表示をHTMLで表示したあと、取り出した値をjavascriptへ渡す方法がわかりません。

<?php

include dirname(__FILE__) . '/db.php';

$sql = $dsn->query("SELECT * FROM mail");
$query = $sql->fetchAll();

?>

<?php foreach($query as $row): ?>
                <tr>
                    <td><?php echo $row['category']; ?></td>
                    <td><a href="###"><?php echo $row['title']; ?></a></td>
                    <td><?php echo mb_substr($row['contents'], 0, 30); ?></td>
                    <td><?php echo $row['history']; ?></td>
                    <td>
                        <form action="###" method="GET">
                            <input type="hidden" name="id" value="<?php echo $row['id']; ?>">
                            <input type="submit" value="コピー">
                        </form>

                        <form action="###" method="GET">
                            <input type="hidden" name="id" value="<?php echo $row['id']; ?>">
                            <input type="submit" value="編集">
                        </form>
                    </td>
                </tr>

                <?php endforeach; $dsn = null; ?>

コピーボタンを押したら、contentsの中身がクリップボードへコピーする方法が知りたいです。

PHPで可能なのか、javascriptでないとダメなのかご教授願います。

Comments

[tanishi_a]

PHPはサーバ側、JSはPC側（ブラウザ）で実行されることを考えると、自ずとJSです。
質問文よく読んでなかったことに気がついたので追記。
PHPから受け取ったあとクリップボードにコピーまでを1回の操作でやりたいということであれば、XHRを使うかとかaxiosのようなライブラリを使うかして非同期でPHPからデータ取得するコードを書く必要があります。詳しくは上記キーワードでググってみてください。

、、、、と、思いましたが、非同期でPHPの出力が取れたとして、クリップボードを操作できるかは試してないので自信がないです。

[rinrin1137]

PHPでデータベースから取り出した動的な値をJSに渡す方法はありますでしょうか？

[tanishi_a]

失礼しました。書いたあと、質問文がちゃんと読めてないことに気付いて、編集し直しました。

[rinrin1137]

Ajaxなどでデータベースから取り出して試してみるしかないですね・・・。
少しいじってみます！

[tanishi_a]

はい。それです。
ただ、取れたとしてハンドラからクリップボードにアクセスできるのかは試してないので、動かなかったらごめんなさい。

[tanishi_a]

追記 :
ググった範囲だと、ハンドラからクリップボードアクセスは出来なさそうなので、取得する、コピーする、の2回の操作に分ける必要がありそうに思います。

[m.ts10806]

Ajaxと回答しようと思ったらコメント欄で解決してましたか。
何かしらの方法で解決済みとしておいてもらえると。

[rinrin1137]

Ajaxで無事にできましたら、解決済みに致しますので、もう少しの間オープンにさせてくださいませ。m(_ _)m

[tanishi_a]

お。できたんですね！

[rinrin1137]

Ajaxは経験が無く、まだ解決しておりません・・・。
他の方のサンプルコードも参考にさせていただいてコードを書いてみます！
ですのでもう少し解決済みはお待ちください(>_<)

[tanishi_a]

「できましたら」か。失礼しました

[m.ts10806]

「方法」を聞かれているようなので方針が決まれば解決かと思ってました。Ajaxでやろうとしてつまずいてるなら「Ajaxでできるのが確認するまで」で良いのですけど。

[rinrin1137]

申し訳ございません。質問の仕方が悪かったようですね。
うまく説明できておりませんでした。m(_ _)m

[m.ts10806]

質問編集して調整していただければ良いのですけども…

Answer 1

PHPからJavaScriptへアクセスすることはできないので、こんな感じでJavaScriptのソースコード(の一部)をPHPで出力します。効率的な書き方は他にもあるので調べてみてください。

<?php foreach($query as $row): ?>
    <input type="button" onClick="CopyClipboard('<?php echo $row['title']; ?>')">
    <input type="button" onClick="CopyClipboard('<?php echo $row['contents']; ?>')">
<?php endforeach; $dsn = null; ?>

<script type="text/javascript">
function CopyClipboard(s) {
    // 変数sをクリップボードにコピーする処理を記述
}
</script>

Comments

[rinrin1137]

サンプルコードありがとうございます。
こんな簡潔な書き方もあるのですね！勉強になります！
jsの処理の記述もいただけると勉強の励みになります。m(_ _)m

Answer 2

画像を見ると、すでにPHPで取得してhtml上に表示したデータをコピーしたい、ということでしょうか？

コピーする用のテキストを.copyTxtに入れてCSSでdisplay:noneにしておき、その内容をクリップボードに保存する、のが簡単ではないでしょうか。
コピーするのにinputボタンを使うことは意味がないので、pタグに変えました。（体裁はCSSで整えます）
javascriptはjQueryを使っている前提です。
試してないですが、こういう感じでしょうか。

<?php foreach($query as $row): ?>
 <tr>
    <td><?php echo $row['category']; ?></td>
     <td><a href="###"><?php echo $row['title']; ?></a></td>
     <td><?php echo mb_substr($row['contents'], 0, 30); ?></td>
     <td><?php echo $row['history']; ?></td>
     <td>
         <p class="copyBtn">コピー</p>
         <p class="copyTxt"><?php echo $row['category']; ?> <?php echo $row['title']; ?> <?php echo mb_substr($row['contents'], 0, 30); ?> <?php echo $row['history']; ?></p>

         <form action="###" method="GET">
            <input type="hidden" name="id" value="<?php echo $row['id']; ?>">
            <input type="submit" value="編集">
         </form>
     </td>
  </tr>
<?php endforeach; $dsn = null; ?>

.copyTxt {display: none;}

$(function(){
  $(".copyBtn").click(function(){
    txt = $(".copyTxt",$(this).parents("td")).text();
    if(window.clipboardData){
      window.clipboardData.setData("Text" , txt);
    }
    if(navigator.clipboard){
      navigator.clipboard.writeText(txt);
    }
  }
});

Comments

[rinrin1137]

ありがとうございます。
いただいたコードで無事に解決致しました！