CODEWITHSUNDEEP
javascript
stvckz
stvckz

Reputation: 11

Problem with copying a string, Javascript

I'm sorry if there's already a question like this, but I've found nothing about this, nor do I know exactly what to look for.

The problem:

When I copy #download_link via the copy button it only copies 53297234.png instead of 5ec8515390d267.53297234.png

My code:

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

    <div class="input-group mb-3">
     <div class="input-group-prepend">
      <button class="btn btn-outline-secondary" type="button" onclick="copy2clip('#download_link')">Copy</button>
     </div>
      <input type="text" class="form-control" id="download_link" placeholder="Link" value="https://example.org/u/". $row['name'] ."" disabled>
     </div>

$row['name'] = 5ec8515390d267.53297234.png

Thanks in advance :)

Upvotes: 0

Views: 76

Answers (2)

Chems Eddine
Chems Eddine

Reputation: 153

If you are interested in writing some fancy clean code, you should check this library clipboard.js .

Example:

// you need to instantiate it by passing selector
new ClipboardJS('.btn');
<!-- Include the script via CDN (you can download it) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>


<div class="input-group mb-3">
  <div class="input-group-prepend">
    <!-- Trigger -->
    <button class="btn btn-outline-secondary" type="button" data-clipboard-target="#download_link">Copy</button>
  </div>
  <input type="text" class="form-control" id="download_link" placeholder="Link" value="https://example.org/u/" .
            $row['name'] ."" readonly>
</div>

Upvotes: 0

ggorlen
ggorlen

Reputation: 57115

I'm not sure why you're getting a partial string--the code shouldn't work as is. Assuming your PHP variable concatenation is working (it's a good idea to establish that, then remove it from the question so it's reproducible and isolated), the .text() function can't be used to access an input element's value. Use $(element).val() instead.

From the docs:

The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method.

As an aside, I wouldn't use $ to prefix your vars in JS. It's not a typical style and makes it confusing to see what's jQuery and what's JS.

If this doesn't solve the problem, then the issue is likely in your PHP script. Make sure it's concatenating correctly.

function copy2clip(element) {
  var temp = $("<input>");
  $("body").append(temp);
  temp.val($(element).val()).select();
  document.execCommand("copy");
  temp.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-group mb-3">
  <div class="input-group-prepend"> 
    <button 
      class="btn btn-outline-secondary" 
      type="button" 
      onclick="copy2clip('#download_link')"
    >Copy</button> 
  </div>
  <input 
    type="text" 
    class="form-control" 
    id="download_link" 
    placeholder="Link" 
    value="https://example.org/u/5ec8515390d267.53297234.png"
    disabled
  >
</div>

Upvotes: 1

Related Questions