Generating and copying a user generated link

Question

I'm making an internal page to generate payment links for staff to send to customers. The staff member should be able to input a decimal like 25.99 and that be combined with https://example.com/pay/ to give https://example.com/pay/25.99

<script>
function process() {
  var copyText ="https://example.com/pay/" + document.getElementById("paylink").value;
  copyText.select();
  document.execCommand("copy");
  alert("Copied the link: " + copyText.value);
}
</script>

<form onSubmit="return process();">
<p>Enter the amount as a decimal:</p><br>
<input type="text" name="url" id="url"> <input type="submit" value="Get Link" id="paylink">
</form>

I've managed in a different version to send the user to the URL but I want to avoid the need for staff to visit these URLs and just immediately copy it instead.

Any help would be appreciated. Thanks in advance.

UPDATE: This clearly isn't a duplicate, if you read it you'd know that

Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Jeto, Feb 03 '19 at 00:22
It isn't, I know how to do that. The copying is fine. It's combining with an element ID @Jeto, thanks though. — phphelpplease, Feb 03 '19 at 00:24
Wlel you're calling `select()` on a string, so that can't work too well :) — Jeto, Feb 03 '19 at 00:25
So what *is* your question? Where do you want to copy the URL to? — Nick, Feb 03 '19 at 00:34
The clipboard, @Nick. I might do it in PHP tbh, I have no idea how this question isn't clear — phphelpplease, Feb 03 '19 at 00:37
The answer by Dean Taylor on Page 2 is the answer you need: https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript?page=2&tab=oldest#tab-top It has over 1700 upvotes. — Twisty, Feb 03 '19 at 00:38
Greg Lowe's answer to the duplicate should work for you, his function takes a simple text string (e.g. your `copyText`) as input. — Nick, Feb 03 '19 at 00:47

score 1 · Accepted Answer · answered Feb 03 '19 at 01:08

Below is a modified code of yours in jsfiddle, manipulating the input box you have a little bit to execute the copy. (unsure when you will initiate the actual back end call so have to adjust based on that)

https://jsfiddle.net/gowrimr/6vynm0rs/39/

<form onClick="return process();">
<p>Enter the amount as a decimal:</p><br>
<input type="text" name="url" id="url"> <input type="submit" value="Get Link" id="paylink">
</form>

<script>
function process() {
const amt = document.getElementById("url").value
  var copyText ="https://example.com/pay/"+amt
  document.getElementById("url").value=copyText
  url.select();
  document.execCommand("copy");
  document.getElementById("url").value=amt
}
</script>

That's much better. Thank you. I was in the middle of switching it to PHP and then copying that. — phphelpplease, Feb 03 '19 at 01:09

score 0 · Answer 2 · answered Feb 03 '19 at 00:51

Suggest using How do I copy to the clipboard in JavaScript? Answer from Dean Taylor.

JavaScript

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;
  textArea.style.width = '2em';
  textArea.style.height = '2em';
  textArea.style.padding = 0;
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';
  textArea.style.background = 'transparent';
  textArea.value = text;
  document.body.appendChild(textArea);

  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}

function process() {
  var copyText ="https://example.com/pay/" + document.getElementById("paylink").value;
  copyTextToClipboard(copyText);
}

jQuery

function copyTextToClipboard(text) {
  var textArea = $("<textarea">).css({
    position: "fixed",
    top: 0,
    left: 0,
    width: "2em",
    height: "2em",
    padding: 0,
    border: "none",
    outline: "none",
    "box-shadow": "none",
    background: "transparent",
    value: text
  }).appendTo($("body"));

  textArea[0].focus();
  textArea[0].select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  textArea.remove();
}

function process() {
  var copyText ="https://example.com/pay/" + $("#paylink").val();
  copyTextToClipboard(copyText);
}

Hope that helps.

Generating and copying a user generated link

2 Answers2