Button that loads a value coming from a classic ASP string to clipboard

Would it be possible to transport a value from a classic ASP string to the user his or her clipboard using pure javascript only?

I've found this example and tried to modify it to work with a hidden form input. But without succes.
LVL 1
SteynskAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
<button id="test">Click me</button>

Open in new window

$(function(){

   $('#test').on('click',function(){
     $.ajax({
        method: "POST",
        url: "process.asp",
        data: { name: "John" }
     })
  .done(function( data ) {
 
       copyToClipboard(data);

   });
 });
});
function copyToClipboard(elementId) {

  // Create an auxiliary hidden input
  var aux = document.createElement("input");

  // Get the text from the element passed into the input
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append the aux input to the body
  document.body.appendChild(aux);

  // Highlight the content
  aux.select();

  // Execute the copy command
  document.execCommand("copy");

  // Remove the input from the body
  document.body.removeChild(aux);

}

Open in new window


PROCESS.ASP
name = request.form("name")
response.write "hello "& name

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Yes.

From the url you posted
<p id="text_element">Copy this !</p>

<button onclick="copyToClipboard('text_element')">
    Copy to clipboard
</button>
<br/><br/><input type="text" placeholder="Paste here for checking" />

Open in new window

function copyToClipboard(elementId) {

  // Create an auxiliary hidden input
  var aux = document.createElement("input");

  // Get the text from the element passed into the input
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append the aux input to the body
  document.body.appendChild(aux);

  // Highlight the content
  aux.select();

  // Execute the copy command
  document.execCommand("copy");

  // Remove the input from the body
  document.body.removeChild(aux);

}

function log(){
	console.log('---')
}

Open in new window


Change the html to
<p id="text_element"><% response.write("Copy this !")%></p>

<button onclick="copyToClipboard('text_element')">
    Copy to clipboard
</button>
<br/><br/><input type="text" placeholder="Paste here for checking" />

Open in new window


Where <% response.write("Copy this !")%> can be your database or anything else that is called from the server.
0
 
SteynskAuthor Commented:
Thank you Scott for your very quick response. But would it be possible to hide the

<p id="text_element"><% response.write("Copy this !")%></p>

part? how should I do this? can I use<span> tags?
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What do you mean by hide?
0
 
SteynskAuthor Commented:
The value that should be copied to the clipboard should not be visible in the form.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The above accepts a click, then  uses ajax to send data to an asp page that returns "hello John".  Then calls the js function to add to the clipboard.

I didn't test it, but I think that should work.
0
 
SteynskAuthor Commented:
Thank you very much Scott
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think that js is wrong

Use this instead

$(function(){

   $('#test').on('click',function(){
     $.ajax({
        method: "POST",
        url: "process.asp",
        data: { name: "John" }
     })
  .done(function( data ) {
 
       copyToClipboard(data);

   });
 });
});
function copyToClipboard(text) {

  // Create an auxiliary hidden input
  var aux = document.createElement("input");

  // Get the text from the element passed into the input
  aux.setAttribute("value", text);

  // Append the aux input to the body
  document.body.appendChild(aux);

  // Highlight the content
  aux.select();

  // Execute the copy command
  document.execCommand("copy");

  // Remove the input from the body
  document.body.removeChild(aux);

}

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I changed this lines

  function copyToClipboard(elementId) {

  aux.setAttribute("value", document.getElementById(elementId).innerHTML);
 

to

function copyToClipboard(text) {

  aux.setAttribute("value", text);
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.