Copy link of an anchor tag on click of it

This is the code that I have used to show some of the data. In this code, I am having anchor tag and I want to copy the link of that anchor tag. This is the code I have used as below:

<div class="search_item_list clearfix" id="response">

   <?php foreach($jobs as $job){

   ?>

    <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" 

       href="<?=base_url().'home/company_profile_detail?id='.$job['company_id'];?>"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

    <?php } ?>

</div>



<script>

   $(".copy_text").click(function(e){

      e.preventDefault();

      var button = $(this);

      var text = button.attr("href");

      text.select();

      $(document).execCommand("copy");

      alert("Copied the text ");

   })

</script>

I am getting the jQuery as

text.select is not a function.

edited Nov 19 '18 at 11:41

Calvin Nunes

3,66021033

asked Nov 19 '18 at 6:05

Arun Sharma

186

You just need to call text not text.select()

– Hamza Haider
Nov 19 '18 at 6:08

if i do that the error would be $(...).execCommand is not a function

– Arun Sharma
Nov 19 '18 at 6:10

why you use this text.select();

– Bhargav Chudasama
Nov 19 '18 at 6:15

Because to copy the text first you need to select that text w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard i followed the example from this

– Arun Sharma
Nov 19 '18 at 6:33

add a comment |

This is the code that I have used to show some of the data. In this code, I am having anchor tag and I want to copy the link of that anchor tag. This is the code I have used as below:

<div class="search_item_list clearfix" id="response">

   <?php foreach($jobs as $job){

   ?>

    <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" 

       href="<?=base_url().'home/company_profile_detail?id='.$job['company_id'];?>"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

    <?php } ?>

</div>



<script>

   $(".copy_text").click(function(e){

      e.preventDefault();

      var button = $(this);

      var text = button.attr("href");

      text.select();

      $(document).execCommand("copy");

      alert("Copied the text ");

   })

</script>

I am getting the jQuery as

text.select is not a function.

edited Nov 19 '18 at 11:41

Calvin Nunes

3,66021033

asked Nov 19 '18 at 6:05

Arun Sharma

186

You just need to call text not text.select()

– Hamza Haider
Nov 19 '18 at 6:08

if i do that the error would be $(...).execCommand is not a function

– Arun Sharma
Nov 19 '18 at 6:10

why you use this text.select();

– Bhargav Chudasama
Nov 19 '18 at 6:15

Because to copy the text first you need to select that text w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard i followed the example from this

– Arun Sharma
Nov 19 '18 at 6:33

add a comment |

This is the code that I have used to show some of the data. In this code, I am having anchor tag and I want to copy the link of that anchor tag. This is the code I have used as below:

<div class="search_item_list clearfix" id="response">

   <?php foreach($jobs as $job){

   ?>

    <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" 

       href="<?=base_url().'home/company_profile_detail?id='.$job['company_id'];?>"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

    <?php } ?>

</div>



<script>

   $(".copy_text").click(function(e){

      e.preventDefault();

      var button = $(this);

      var text = button.attr("href");

      text.select();

      $(document).execCommand("copy");

      alert("Copied the text ");

   })

</script>

I am getting the jQuery as

text.select is not a function.

edited Nov 19 '18 at 11:41

Calvin Nunes

3,66021033

asked Nov 19 '18 at 6:05

Arun Sharma

186

This is the code that I have used to show some of the data. In this code, I am having anchor tag and I want to copy the link of that anchor tag. This is the code I have used as below:

<div class="search_item_list clearfix" id="response">

   <?php foreach($jobs as $job){

   ?>

    <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" 

       href="<?=base_url().'home/company_profile_detail?id='.$job['company_id'];?>"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

    <?php } ?>

</div>



<script>

   $(".copy_text").click(function(e){

      e.preventDefault();

      var button = $(this);

      var text = button.attr("href");

      text.select();

      $(document).execCommand("copy");

      alert("Copied the text ");

   })

</script>

I am getting the jQuery as

text.select is not a function.

jquery

edited Nov 19 '18 at 11:41

Calvin Nunes

3,66021033

asked Nov 19 '18 at 6:05

Arun Sharma

186

edited Nov 19 '18 at 11:41

Calvin Nunes

3,66021033

asked Nov 19 '18 at 6:05

Arun Sharma

186

edited Nov 19 '18 at 11:41

Calvin Nunes

3,66021033

edited Nov 19 '18 at 11:41

Calvin Nunes

3,66021033

edited Nov 19 '18 at 11:41

Calvin Nunes

3,66021033

asked Nov 19 '18 at 6:05

Arun Sharma

186

asked Nov 19 '18 at 6:05

Arun Sharma

186

asked Nov 19 '18 at 6:05

Arun Sharma

186

You just need to call text not text.select()

– Hamza Haider
Nov 19 '18 at 6:08

if i do that the error would be $(...).execCommand is not a function

– Arun Sharma
Nov 19 '18 at 6:10

why you use this text.select();

– Bhargav Chudasama
Nov 19 '18 at 6:15

Because to copy the text first you need to select that text w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard i followed the example from this

– Arun Sharma
Nov 19 '18 at 6:33

add a comment |

You just need to call text not text.select()

– Hamza Haider
Nov 19 '18 at 6:08

if i do that the error would be $(...).execCommand is not a function

– Arun Sharma
Nov 19 '18 at 6:10

why you use this text.select();

– Bhargav Chudasama
Nov 19 '18 at 6:15

Because to copy the text first you need to select that text w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard i followed the example from this

– Arun Sharma
Nov 19 '18 at 6:33

You just need to call text not text.select()

– Hamza Haider
Nov 19 '18 at 6:08

if i do that the error would be $(...).execCommand is not a function

– Arun Sharma
Nov 19 '18 at 6:10

why you use this text.select();

– Bhargav Chudasama
Nov 19 '18 at 6:15

Because to copy the text first you need to select that text w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard i followed the example from this

– Arun Sharma
Nov 19 '18 at 6:33

add a comment |

4 Answers
4

active

oldest

votes

-1

try below code snippet

$('.copy_text').click(function (e) {

   e.preventDefault();

   var copyText = $(this).attr('href');

   document.addEventListener('copy', function(e) {

    e.clipboardData.setData('text/plain', copyText);

    e.preventDefault();

   }, true);

   document.execCommand('copy');  

   console.log('copied text : ', copyText);

   alert('copied text: ' + copyText); 

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



 <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" href="home/company_profile_detail"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

edited Nov 19 '18 at 6:48

answered Nov 19 '18 at 6:23

Shiv Kumar Baghel

1,3663820

this is not actually coping the link, meaning the copy to clipboard functionality is not performed by this code

– Arun Sharma
Nov 19 '18 at 6:32

added code to copy to clipboard. Thanks @ArunSharma

– Shiv Kumar Baghel
Nov 19 '18 at 6:36

Thankyou soo much it worked for me

– Arun Sharma
Nov 19 '18 at 7:57

:) Happy Coding ...

– Shiv Kumar Baghel
Nov 19 '18 at 7:57

add a comment |

-1

Copying value to clipboard via javascript is a bit complicated process. Basically, you have to create fake Input element and use it for execCommand('copy'). You can take a look at how it works in this module: https://github.com/zenorocha/clipboard.js

answered Nov 19 '18 at 6:20

wanjas

30917

add a comment |

-1

You can use this.

$(".copy_text").click(function (e) {

                    e.preventDefault();

                    var $temp = $("<input>");

                    $("body").append($temp);

                    $temp.val($(this).attr('href')).select();

                    document.execCommand("copy");

                    $temp.remove();

                    alert("Copied the text ");

            })

In this code, you are creating an input, set it's value to your anchor's href, copy it's value to clipboard and then remove that input

answered Nov 19 '18 at 6:21

Ehsan Seyedi

add a comment |

-1

https://jsfiddle.net/jfriend00/v9g1x0o6/ Please visit this for copy text.

var succeed;

try {

      succeed = document.execCommand("copy");

} catch(e) {

    succeed = false;

}

In this case you have to first select attribute of href of the anchor text and then use
document.execCommand("copy");

answered Nov 19 '18 at 6:39

Bhargav Aboti

2015

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369140%2fcopy-link-of-an-anchor-tag-on-click-of-it%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

-1

try below code snippet

$('.copy_text').click(function (e) {

   e.preventDefault();

   var copyText = $(this).attr('href');

   document.addEventListener('copy', function(e) {

    e.clipboardData.setData('text/plain', copyText);

    e.preventDefault();

   }, true);

   document.execCommand('copy');  

   console.log('copied text : ', copyText);

   alert('copied text: ' + copyText); 

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



 <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" href="home/company_profile_detail"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

edited Nov 19 '18 at 6:48

answered Nov 19 '18 at 6:23

Shiv Kumar Baghel

1,3663820

this is not actually coping the link, meaning the copy to clipboard functionality is not performed by this code

– Arun Sharma
Nov 19 '18 at 6:32

added code to copy to clipboard. Thanks @ArunSharma

– Shiv Kumar Baghel
Nov 19 '18 at 6:36

Thankyou soo much it worked for me

– Arun Sharma
Nov 19 '18 at 7:57

:) Happy Coding ...

– Shiv Kumar Baghel
Nov 19 '18 at 7:57

add a comment |

-1

try below code snippet

$('.copy_text').click(function (e) {

   e.preventDefault();

   var copyText = $(this).attr('href');

   document.addEventListener('copy', function(e) {

    e.clipboardData.setData('text/plain', copyText);

    e.preventDefault();

   }, true);

   document.execCommand('copy');  

   console.log('copied text : ', copyText);

   alert('copied text: ' + copyText); 

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



 <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" href="home/company_profile_detail"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

edited Nov 19 '18 at 6:48

answered Nov 19 '18 at 6:23

Shiv Kumar Baghel

1,3663820

this is not actually coping the link, meaning the copy to clipboard functionality is not performed by this code

– Arun Sharma
Nov 19 '18 at 6:32

added code to copy to clipboard. Thanks @ArunSharma

– Shiv Kumar Baghel
Nov 19 '18 at 6:36

Thankyou soo much it worked for me

– Arun Sharma
Nov 19 '18 at 7:57

:) Happy Coding ...

– Shiv Kumar Baghel
Nov 19 '18 at 7:57

add a comment |

-1

try below code snippet

$('.copy_text').click(function (e) {

   e.preventDefault();

   var copyText = $(this).attr('href');

   document.addEventListener('copy', function(e) {

    e.clipboardData.setData('text/plain', copyText);

    e.preventDefault();

   }, true);

   document.execCommand('copy');  

   console.log('copied text : ', copyText);

   alert('copied text: ' + copyText); 

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



 <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" href="home/company_profile_detail"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

edited Nov 19 '18 at 6:48

answered Nov 19 '18 at 6:23

Shiv Kumar Baghel

1,3663820

try below code snippet

$('.copy_text').click(function (e) {

   e.preventDefault();

   var copyText = $(this).attr('href');

   document.addEventListener('copy', function(e) {

    e.clipboardData.setData('text/plain', copyText);

    e.preventDefault();

   }, true);

   document.execCommand('copy');  

   console.log('copied text : ', copyText);

   alert('copied text: ' + copyText); 

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



 <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" href="home/company_profile_detail"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

$('.copy_text').click(function (e) {

   e.preventDefault();

   var copyText = $(this).attr('href');

   document.addEventListener('copy', function(e) {

    e.clipboardData.setData('text/plain', copyText);

    e.preventDefault();

   }, true);

   document.execCommand('copy');  

   console.log('copied text : ', copyText);

   alert('copied text: ' + copyText); 

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



 <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" href="home/company_profile_detail"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

$('.copy_text').click(function (e) {

   e.preventDefault();

   var copyText = $(this).attr('href');

   document.addEventListener('copy', function(e) {

    e.clipboardData.setData('text/plain', copyText);

    e.preventDefault();

   }, true);

   document.execCommand('copy');  

   console.log('copied text : ', copyText);

   alert('copied text: ' + copyText); 

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



 <a class="copy_text"  data-toggle="tooltip" title="Copy to Clipboard" href="home/company_profile_detail"><span class="icon link"><i class="fa fa-link"></i></span>Copy Link</a>

edited Nov 19 '18 at 6:48

answered Nov 19 '18 at 6:23

Shiv Kumar Baghel

1,3663820

edited Nov 19 '18 at 6:48

answered Nov 19 '18 at 6:23

Shiv Kumar Baghel

1,3663820

answered Nov 19 '18 at 6:23

Shiv Kumar Baghel

1,3663820

answered Nov 19 '18 at 6:23

Shiv Kumar Baghel

1,3663820

this is not actually coping the link, meaning the copy to clipboard functionality is not performed by this code

– Arun Sharma
Nov 19 '18 at 6:32

added code to copy to clipboard. Thanks @ArunSharma

– Shiv Kumar Baghel
Nov 19 '18 at 6:36

Thankyou soo much it worked for me

– Arun Sharma
Nov 19 '18 at 7:57

:) Happy Coding ...

– Shiv Kumar Baghel
Nov 19 '18 at 7:57

add a comment |

this is not actually coping the link, meaning the copy to clipboard functionality is not performed by this code

– Arun Sharma
Nov 19 '18 at 6:32

added code to copy to clipboard. Thanks @ArunSharma

– Shiv Kumar Baghel
Nov 19 '18 at 6:36

Thankyou soo much it worked for me

– Arun Sharma
Nov 19 '18 at 7:57

:) Happy Coding ...

– Shiv Kumar Baghel
Nov 19 '18 at 7:57

this is not actually coping the link, meaning the copy to clipboard functionality is not performed by this code

– Arun Sharma
Nov 19 '18 at 6:32

added code to copy to clipboard. Thanks @ArunSharma

– Shiv Kumar Baghel
Nov 19 '18 at 6:36

Thankyou soo much it worked for me

– Arun Sharma
Nov 19 '18 at 7:57

:) Happy Coding ...

– Shiv Kumar Baghel
Nov 19 '18 at 7:57

add a comment |

-1

answered Nov 19 '18 at 6:20

wanjas

30917

add a comment |

-1

answered Nov 19 '18 at 6:20

wanjas

30917

add a comment |

-1

answered Nov 19 '18 at 6:20

wanjas

30917

answered Nov 19 '18 at 6:20

wanjas

30917

answered Nov 19 '18 at 6:20

wanjas

30917

answered Nov 19 '18 at 6:20

wanjas

30917

answered Nov 19 '18 at 6:20

wanjas

30917

add a comment |

-1

You can use this.

$(".copy_text").click(function (e) {

                    e.preventDefault();

                    var $temp = $("<input>");

                    $("body").append($temp);

                    $temp.val($(this).attr('href')).select();

                    document.execCommand("copy");

                    $temp.remove();

                    alert("Copied the text ");

            })

In this code, you are creating an input, set it's value to your anchor's href, copy it's value to clipboard and then remove that input

answered Nov 19 '18 at 6:21

Ehsan Seyedi

add a comment |

-1

You can use this.

$(".copy_text").click(function (e) {

                    e.preventDefault();

                    var $temp = $("<input>");

                    $("body").append($temp);

                    $temp.val($(this).attr('href')).select();

                    document.execCommand("copy");

                    $temp.remove();

                    alert("Copied the text ");

            })

In this code, you are creating an input, set it's value to your anchor's href, copy it's value to clipboard and then remove that input

answered Nov 19 '18 at 6:21

Ehsan Seyedi

add a comment |

-1

You can use this.

$(".copy_text").click(function (e) {

                    e.preventDefault();

                    var $temp = $("<input>");

                    $("body").append($temp);

                    $temp.val($(this).attr('href')).select();

                    document.execCommand("copy");

                    $temp.remove();

                    alert("Copied the text ");

            })

In this code, you are creating an input, set it's value to your anchor's href, copy it's value to clipboard and then remove that input

answered Nov 19 '18 at 6:21

Ehsan Seyedi

You can use this.

$(".copy_text").click(function (e) {

                    e.preventDefault();

                    var $temp = $("<input>");

                    $("body").append($temp);

                    $temp.val($(this).attr('href')).select();

                    document.execCommand("copy");

                    $temp.remove();

                    alert("Copied the text ");

            })

In this code, you are creating an input, set it's value to your anchor's href, copy it's value to clipboard and then remove that input

answered Nov 19 '18 at 6:21

Ehsan Seyedi

answered Nov 19 '18 at 6:21

Ehsan Seyedi

answered Nov 19 '18 at 6:21

Ehsan Seyedi

answered Nov 19 '18 at 6:21

Ehsan Seyedi

add a comment |

-1

https://jsfiddle.net/jfriend00/v9g1x0o6/ Please visit this for copy text.

var succeed;

try {

      succeed = document.execCommand("copy");

} catch(e) {

    succeed = false;

}

In this case you have to first select attribute of href of the anchor text and then use
document.execCommand("copy");

answered Nov 19 '18 at 6:39

Bhargav Aboti

2015

add a comment |

-1

https://jsfiddle.net/jfriend00/v9g1x0o6/ Please visit this for copy text.

var succeed;

try {

      succeed = document.execCommand("copy");

} catch(e) {

    succeed = false;

}

In this case you have to first select attribute of href of the anchor text and then use
document.execCommand("copy");

answered Nov 19 '18 at 6:39

Bhargav Aboti

2015

add a comment |

-1

https://jsfiddle.net/jfriend00/v9g1x0o6/ Please visit this for copy text.

var succeed;

try {

      succeed = document.execCommand("copy");

} catch(e) {

    succeed = false;

}

In this case you have to first select attribute of href of the anchor text and then use
document.execCommand("copy");

answered Nov 19 '18 at 6:39

Bhargav Aboti

2015

https://jsfiddle.net/jfriend00/v9g1x0o6/ Please visit this for copy text.

var succeed;

try {

      succeed = document.execCommand("copy");

} catch(e) {

    succeed = false;

}

In this case you have to first select attribute of href of the anchor text and then use
document.execCommand("copy");

answered Nov 19 '18 at 6:39

Bhargav Aboti

2015

answered Nov 19 '18 at 6:39

Bhargav Aboti

2015

answered Nov 19 '18 at 6:39

Bhargav Aboti

2015

answered Nov 19 '18 at 6:39

Bhargav Aboti

2015

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk