2

I trying to copy to clipboard the values inside the input fields. The code to get these values is working fine, when I click on the button for "copy", with the alert() function as little debug, I can see the right value inside... but when I try to take this value to copy to clipboard, an error comes up. I have seen a lot of example around the web, but only for an element... So, this is my code that shows the right value, but not works for a copy.

$(document).ready(function() {
  $('div#screen_wrap').each(function() {
    var elem = $(this);
    $("#copycoords", elem).click(function() {
      var coords = $("#coords", elem).val();
      coords.select(); // This line is the error
      document.execCommand("copy", false);
      alert(coords);
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div id="screen_wrap" class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 1</p>
  <input type="text" value="47.529016,19.050963" id="coords" />
  <input type="button" value="Copia" id="copycoords" class="btn1" />
</div>

<div id="screen_wrap" class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 2</p>
  <input type="text" value="41.662055,-0.894292" id="coords" />
  <input type="button" value="Copia" id="copycoords" class="btn1" />
</div>

<div id="screen_wrap" class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 3</p>
  <input type="text" value="38.461808,27.217074" id="coords" />
  <input type="button" value="Copia" id="copycoords" class="btn1" />
Nidhin Joseph
  • 9,981
  • 4
  • 26
  • 48
Devilix
  • 334
  • 3
  • 13
  • `.val()` returns a string. What do you expect `.select()` to do on a string? – Barmar Oct 01 '19 at 01:14
  • I'm not an expert on Jquery, im based on a lot of example found on the web... sorry :( – Devilix Oct 01 '19 at 01:16
  • 2
    IDs are supposed to be unique, you shouldn't use the same `id="copycoords"` and `id="coords"` in each DIV. Use classes for repeated elements. – Barmar Oct 01 '19 at 01:16
  • Your `.each()` loop won't work because the selector only returns the first DIV. See https://stackoverflow.com/questions/14274982/how-can-i-apply-a-jquery-function-to-all-elements-with-the-same-id – Barmar Oct 01 '19 at 01:25
  • No, without the "copy" part, the entire code workin fine! – Devilix Oct 01 '19 at 01:30
  • Apparently `$("div#screen_wrap")` isn't optimized to a single element like `$("#screen_wrap")` is. But you should still do it right. – Barmar Oct 01 '19 at 01:32

2 Answers2

2

You are using the select function on the value of the element - $("#coords", elem).val();, you should just call it on the element itself - $("#coords", elem).select()

Btw. $("#coords", elem) is unnecessary, you shouldn't use the same id anywhere in the page as ids are supposed to be unique, so $("#coords") should suffice

Velimir Tchatchevsky
  • 2,812
  • 1
  • 16
  • 21
1

Firstly, your id attribute needs to be uniques across all dom elements. Secondly, the select() needs to be on a dom element. You can modify the code as below.

$('input[type="button"]').click(function() {
  $(this).parent().find('input[type="text"]').select();
  document.execCommand("copy", false);
});
input {
  outline: none;
}

input::selection {
  color: initial;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 1</p>
  <input type="text" value="47.529016,19.050963" />
  <input type="button" value="Copia" class="btn1" />
</div>

<div class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 2</p>
  <input type="text" value="41.662055,-0.894292" />
  <input type="button" value="Copia" class="btn1" />
</div>

<div class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 3</p>
  <input type="text" value="38.461808,27.217074" />
  <input type="button" value="Copia" class="btn1" />
</div>
Nidhin Joseph
  • 9,981
  • 4
  • 26
  • 48