title: Copy text to the clipboard with PHP and JavaScript?
body: <p>I want to include a button on an existing webpage that will copy text to the Windows clipboard.</p>
  
  <p>The webpage and the PHP in it already works well to create and display text like this:</p>
  
  <p>Output on webpage:</p>
  
  <pre><code>'Abby Normal' &lt;abnormal@rockyhorror.com&gt;, 'Brad Majors' &lt;bm@rockyhorror.com&gt;, 'Frank N. Furter' &lt;franknfurter@rockyhorror.com&gt;
  </code></pre>
  
  <p>So now I want to add a Javascript function and an html button that calls that function to copy that output to the Windows clipboard. </p>
  
  <p>Problem: nothing is copied when the button is pressed. What am I doing wrong? Thank you in advance.</p>
  
  <pre><code>&lt;?PHP
    session_start();
    include('include/_initsess.php');
    include('include/_setdb.php');
    if(!isset($_SESSION['userlist'])) exit;
    $users = $_SESSION['userlist'];
    $emails = '';
    $qry = "SELECT FIRST,LAST,EMAIL FROM users WHERE PKEY IN ($users)";
    $result  = mysql_query($qry);     
    $numrows = mysql_num_rows($result);   
    for ($m=0; $m&lt;$numrows; $m++) {
      $row = mysql_fetch_array($result); 
      list($fn,$ln,$em) = $row;
      $emails .= ($m==0) ? "'".$fn." ".$ln."' &amp;lt;".$em."&amp;gt;" : (", '".$fn." ".$ln."' &amp;lt;".$em."&amp;gt;");
      } // end for
  ?&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;span class=mono id="theList" value="&lt;?php echo $emails; ?&gt;"&gt;
    &lt;?PHP echo($emails); ?&gt;
  &lt;/span&gt;
  
  &lt;script&gt;
  function copyToClipboardWithJavascript() {
    /* Get the text field */
    var copyText = document.getElementById("theList");
    /* Select the text field */
    copyText.select();
    /* Copy the text inside the text field */
    document.execCommand("copy");
  }
  &lt;/script&gt;
  
  &lt;button onclick="copyToClipboardWithJavascript()"&gt;Click here&lt;/button&gt;
  
  &lt;/span&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've tried the way a Javascript tutorial suggested:</p>
  
  <pre><code>var copyText = = document.getElementById("theList");
  </code></pre>
  
  <p>And my own variations using PHP within Javascript:</p>
  
  <pre><code>var copyText = &lt;?PHP echo($emails); ?&gt;;
  var copyText = `&lt;?PHP echo($emails); ?&gt;`;
  var copyText = "&lt;?PHP echo($emails); ?&gt;";
  var copyText = '&lt;?PHP echo($emails); ?&gt;';
  </code></pre>
  
  <p>But the result is that nothing causes any errors and nothing is copied to the clipboard.</p>
  
  <p>I know the web page is being immediately saved and used because I also make a trivial change to the letters 'Click here' in the button and can see the difference after refreshing.<code>enter code here</code></p>
  
  <p>***UPDATE WITH ANSWER I USED:****</p>
  
  <pre><code>&lt;span class=mono id="theList"&gt;
  &lt;?PHP echo($emails); ?&gt;
  &lt;/span&gt;
  &lt;button id="copyButton" onclick="myCopyFunction()"&gt;Copy email address list to clipboard.&lt;/button&gt;
  &lt;script&gt;
  function myCopyFunction() {
    var myText = document.createElement("textarea")
    myText.value = document.getElementById("theList").innerHTML;
    myText.value = myText.value.replace(/&amp;lt;/g,"&lt;");
    myText.value = myText.value.replace(/&amp;gt;/g,"&gt;");
    document.body.appendChild(myText)
    myText.focus();
    myText.select();
    document.execCommand('copy');
    document.body.removeChild(myText);
  }
  &lt;/script&gt;
  </code></pre>