1

I have an HTML form with the method 'get'. When I click the 'submit' the action is to open a php file in a new tab. This is working properly and because I used 'get' I can copy/paste the URL and get back to the same page with the same variables from the form when I originally submitted it.

Now I am looking to add an additional button to the form but I would like it to copy the URL with all the variables to clipboard instead of opening the URL in a new tab.

I'm not looking for someone to write the code for me just point me in the right direction. Should I try to figure out a way to build the URL and then copy it to clipboard using Javascript? Would PHP make more sense?

I can post the code so far if someone thinks it will help but its really just a basic HTML form at the moment. Regardless of what fields, etc are in the form how do I build the URL with those fields?

I'm hoping that since it already builds the URL to redirect you there in the new tab there is someway to just grab that and copy it to clipboard without actually redirecting them.

EDIT

Question is getting marked as duplicate because other questions have answered how to copy simple text to a clipboard. I guess I wasn't clear enough in the original question, I would like to interrupt the form after it builds the URL, but before it redirects you to the URL. Then copy that URL to the clipboard. Might not be possible since I've done a lot of googling and haven't found anything on it. If someone can even just tell me if it is possible that would be greatly appreciated.

Perhaps the only way to do this is to build the URL myself then copy to the clipboard, which is fine but I wanted to make sure I wasn't missing something really simple like formtarget = 'clipboard' or something that just makes too much sense.

B.Breckenridge
  • 35
  • 7
  • 1
    Depending on the application, I might build the URL in JavaScript and copy it to the clipboard. See [How to create query parameters in Javascript?](https://stackoverflow.com/questions/111529/how-to-create-query-parameters-in-javascript) and [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) – showdev Jan 26 '18 at 22:26
  • 1
    You have to be careful posting these types of questions. When I started with Stack, I was doing something similar. You have not only describe the effort you've made, but show the effort, too. Show an attempt at writing the code you intend to use (via your own research). I think you were down-voted originally because you didn't do that. – Jared Newnam Jan 26 '18 at 22:43
  • Doing a Google search of "Click to copy" would have led you in the right direction. – Jared Newnam Jan 26 '18 at 22:45
  • You would not believe the amount of random crap that comes up when you google something like Click to Copy. Copying all sorts of things I have no interest in copying. I asked because I was hoping I was missing something since the work is already done when it redirects you to the URL. – B.Breckenridge Jan 26 '18 at 23:04

1 Answers1

0

I just threw this together. I've been using a variation of it for a few years.

Have your URL display to a div, and then have your button refer to that displayed div. I've done exactly what you're trying to do and this way has worked out great.

HTML

<h3 id="copyMe">Click that button and you'll copy all of me.</h3>

<button class="btn btn-lg btn-secondary" onclick="copyToClipboard('#copyMe')"><i class="fa fa-files-o" aria-hidden="true"></i>Click to Copy</button>

JavaScript

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

View Codepen

Jared Newnam
  • 2,296
  • 5
  • 31
  • 60